- <meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。 对于viewport属性,我是真正在接触移动web开发是才遇到的,一把的ps布局都是固定的960px,1000px这种。
下面三篇文章是对viewport属性详细的解释: Viewport(视区概念)——pc端的理解 Viewport(视区概念)——移动端的应用 viewport ——视区概念(转) 对于老式IE6,7,8浏览器需要js处理,由于主要平台是ios和安卓,所有可以暂时不考虑
二. 不使用绝对宽度 由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。
这一条非常重要。 具体说,CSS代码不能指定像素宽度: width:xxx px; 只能指定百分比宽度: width: xx%; 或者:width:auto; 这里开发是指一个网页不仅能用在ps上,也能同时用于移动端,但是对于webapp这种还是需要单独做一个webapp使用的页面。
对于这个知识点,对于我目前做的项目有用处,主要用于控制限定数据库里读出来的图片宽度。 详见:手机webapp的jquery mobile初次使用心得和解决图片自适应大小问题
三. 相对大小的字体 字体也不能使用绝对大小(px),而只能使用相对大小(em)。
- body { font: normal 100% Helvetica, Arial, sans-serif; }
上面的代码指定,字体大小是页面默认大小的100%,即16像素。
- h1 { font-size: 1.5em; }
然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。
- small { font-size: 0.875em; }
small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。
四. 流动布局(fluid grid) "流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。
- .main { float: right; width: 70%; } .leftBar { float: left; width: 25%; }
float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。 另外,绝对定位(position: absolute)的使用,也要非常小心。
五. "自适应网页设计"的核心,就是CSS3引入的Media Query模块。 它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。
- <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。
- <link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />
如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。 除了用html标签加载CSS文件,还可以在现有CSS文件中加载。
- @import url("tinyScreen.css") screen and (max-device-width: 400px);
六. CSS的@media规则 同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。
- @media screen and (max-device-width: 400px) { .column { float: none; width:auto; } #sidebar { display:none; } }
上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。
七. 图片的自适应(fluid image) 除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。 这只要一行CSS代码:
img { max-width: 100%;} 这行代码对于大多数嵌入网页的视频也有效,所以可以写成:
img, object { max-width: 100%;}
老版本的IE不支持max-width,
所以只好写成: img { width: 100%; }
此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:
- img { -ms-interpolation-mode: bicubic; } 或者,Ethan Marcotte的imgSizer.js。 addLoadEvent(function() { var imgs = document.getElementById("content").getElementsByTagName("img"); imgSizer.collate(imgs); });
不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。
相关推荐
个人导航HTML源码,支持三端自适应,带赞助功能,采用设计配色网站点赞量最高的一个配色方案,一个二次元风格的引导页就此诞生,经过长传美国服务器测试,结果也是很理想,测速达到了全国深绿,手机端,平板端,PC端...
这样一套代码就搞定手机端尺寸自适应,不需要媒体查询,而且利用Sass和Less能够给我们节约更多的时间,以及更好的体验。 扩展 因为是要计算rem的值,所以我们前端在看到设计图量尺寸的时候会去计算下这个东西
支持iOS,Android(暂不支持WP)等系统以webkit为内核的浏览器,建议在PC端使用以webkit为内核的浏览器(如:Google Chrome)中缩小浏览器窗口宽度查看效果,PC端查看效果需要用鼠标按住导航拖动以模拟手机上手指拖动...
工作需要,要做一个手机自适应的网页效果,终于搞定,先分享并记录! 其实主要就是改掉HTML页面声明: 在网页中加入以下代码,就可以正常显示了: 复制代码代码如下: <meta name=”viewport” content=”width...
这是一款利用HTML5+Canvas手机端微信端微网站大转盘抽奖代码,HTML5+Canvas进行绘制中间内容区域,模仿现实抽奖效果,自适应浏览器宽度。
引言:在微信小程序里,比如商品展示页面的商品详情会有图片展示,PC端设置的商品详情是PC端的宽度,所以在小程序里图片会显示不全,这时就应该做相应的处理,使小程序里图片显示正确 思路 把图片的宽度改为手机...
一款兼容PC端/手机移动端可左右滑动(拖动)焦点图网页特效,可自适应宽度、可用鼠标左右拖动切换图片、可在触屏移动设备上左右滑动切换图片;移动端、触屏设备web前端开发必备JS焦点图代码。请用支持HTML5+CSS3主流...
鉴于市场上用户的手机型号、种类、屏幕分辨率等参差不齐,传统方式根据主流系统分别开发相应的系统耗时又耗力,为了高效开发并节约开发项目成本,本文采用Android+HTML5相结合的方式进行移动端Web系统的设计研发工作...
HTML5移动端自适应插件,根据页面根节点像素大小和当前屏幕宽度来调整DOM节点的宽高 已达到设计稿的设计要求,使用十分简单。
4)手机端第三方登录(独家) 5)整站模块自适应宽度 6)支持无线支付宝支付 7)所有数据与ecshop后台无缝对接 建议搭配>>>ecshop微信通商城与微信完美对接,抢占7亿微信市场,为您创造无线商机! 独家功能: 2...
04、增加了PC端视频播放器大小自适应的设置,可在PC端也设置宽度高度为百分比; 05、增强了手机移动端html5视频播放的兼容性; 06、进一步简化播放器调用代码; 07、去掉了没有多大意义的功能设置,如控制栏隐藏...
4)手机端第三方登录(独家) 5)整站模块自适应宽度 6)支持无线支付宝支付 7)所有数据与ecshop后台无缝对接 建议搭配>>>ecshop微信通商城与微信完美对接,抢占7亿微信市场,为您创造无线商机! ECTouch 新增...
bootstrap栅格系统响应式布局,根据浏览器不同宽度进行自适应地样式响应调整,使pc、平板、手机三端不同风格完美融合~
非常适合用于房产网站建设的一套wordpress模板,自适应宽度的响应式wordpress主题,完美兼容电脑、智能手机、IPAD等终端设备的不同屏幕尺寸、分辨率大小使用最合适的网页页面布局,提供给网站访客最好的浏览效果,...
系统适用于投影投射宴会、晚宴、活动等场景的互动抽奖,最新版本支持用手机端遥控进程,系统采用HTML及WEB前端、后端相关技术开发,作者用最简单的方式打包了exe自解压程序,内置的HTA客户端脚本来执行相关的代码...
本版本还有一个改动,是尝试开始支持手机端的判断。增加了判断函数,但是手机种类太多,手机里的浏览器种类更多,所以该判断可能有少量不准确情况,如果判断为手机,会自动使用手机专用模板展示给手机用户,淘宝推广...
4、模板设置中新增PC端和手机端导航栏的手气不错关闭功能。 5、博客背景改为真善美三个字。 6、移除了捐赠功能,如需要请安装打赏插件即可。 7、新增手机端分享功能,PC端分享功能移动在文章结尾处。 8、移除...
4、修正了PC端和手机端的分享功能,手机端可以分享了。 5、修改停留时间的显示样式。 6、一些细节的修改。 wordpress人文古风主题简介 博闻广记wordpress古风主题模板免费版是基于html5 css3制作的,她是一款...
10.1 让页面自适应屏幕宽度 10.2 在移动设备页面中创建多个显示视图 10.3 创建对话框显示效果 10.4 从外部文件中加载页面内容 10.5 为页面添加转场效果 10.6 设置全局默认的转场效果 10.7 定制显示回退按钮 10.8 在...