自适应网页设计是怎么做到的的相关知识点总结自适应网页设计是怎么做到的的相关知识点总结
自适应网页设计到底是怎么做到的比如允许网页宽度自动调整、相对大小的字体、流动布局（fluid grid）等等，
下面为大家介绍下
"自适应网页设计"到底是怎么做到的？其实并不难。
一. 允许网页宽度自动调整：
首先，在网页代码的头部，加入一行viewport元标签。
复制代码
代码如下:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0,
width=device-width"/>
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放
比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
对于老式IE6，7，8浏览器需要js处理，由于主要平台是ios和安卓，所以可以暂时不考虑Opera不支持。
二. 不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
具体说，CSS代码不能指定像素宽度：
width:xxx px;
只能指定百分比来定义列宽度：
width: xx%;
或者：
width:auto;
或者：
使用最大宽度和最大高度max-width,max-height;
三. 相对大小的字体
字体也不能使用绝对大小（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）。
复制代码
代码如下:
下载后可阅读完整内容，剩余3页未读，立即下载
weixin_38609453
- 粉丝: 9
- 资源: 965
我的内容管理
展开
最新资源
- C++标准程序库：权威指南
- Java解惑：奇数判断误区与改进方法
- C++编程必读：20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程：从入门到精通
- Spring3.0权威指南：JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略：从环境配置到索引创建
- 内存虚拟硬盘技术：提升电脑速度的秘密武器
- Java操作数据库：保存与显示图片到数据库及页面
- ISO14001：2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发：触发器与控制器重定向技术详解
- FPGA开发实战指南：创新设计与进阶技巧
- ShopExV4.8二次开发入门：解决升级问题与功能扩展
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
