自适应（电脑/平板/手机）网页，自适应网页设计练习总结
自适应（电脑/平板/手机）网页，自适应网页设计练习总结
4 人赞了文章
刚好写了个练习，应该是这种效果吧！
电脑端：
手机端：（当然还可以写平板页面啦）
①将网页调整权交给网页（html中）
- <head>标签中加入一行viewport（网页默认的宽度和高度）元标签
<meta name="viewport" content="width_=device-width， initial-scale=1" />
width_=device-width：网页宽度默认等于屏幕宽度
initial-scale=1；1代表网页初始大小占屏幕面积的100%
- 注意：老式浏览器（例如：IE6、7、8），需要使用css3-mediaqueries.js，如下
<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
②禁止使用绝对宽度（css中）
不可：以下这种代码不可使用
width：10px； <!-- 这种代码不可行 -->
可行：以下两种代码均可
width: 20%;width:auto;
③静止对字体使用固定大小（css中）
不可：以下这种代码不可使用
font-size: 12px
可行：以下代码均可行
font-size:1.2em
补充：浏览器的默认字体高都是16px，所以未经调整的浏览器在显示1em=16px。于是我们就可以通过这个等量关系进行计算了！若已经写好的网页字体的px直接除以16就是em了。
body { font: normal 100% Helvetica， Arial， sans-serif;} <!--html中-->
④得是流动布局（css中）
- 就是使用float
#father .panel_text{ background-color: #F5F5F2; float: left; margin-left: -88%; margin-top: 15%; width:295%; height:200%; }
⑤让网页选择适应屏幕的css，就像Java等语言中的if判断（在html中）
利用css3中的Media Query模块
提示：下面if、if else只是方便解释写的，直接将下面代码代码框的代码放在<meat>标签里
if（如果屏幕宽度小于400像素）{
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="css/tinyScreen.css" />
}else if（如果400像素<屏幕宽度<600像素）{
<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px) and (max-device-width: 600px)" href="css/tinyScreen.css" />
}
⑦还有图片啦！
写这个简易页面时就踩了一个坑，图片没有设置。。。
css代码是具体情况，我做的练习页面是100%，但最好根据屏幕设置对应解析度的图片！
----------------------------------------------------------------------------------------------------
end：第⑤步（补充类，另外一种方法）css3中@media的使用（根据屏幕，在一个css文件中判断使用哪段css代码）
先看看定义：
- 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
- @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
以下代码意思：如果文档宽度小于 300 像素则修改背景颜色(background-color):
@media screen and (max-width: 300px) { body { background-color:lightblue; }}
最后来个总结吧：印象最深的就是自适应的思维和物理学很近有木有！由于物体可以选取其他不同的东西做参考，所以物理书：「运动是绝对的，静止是相对的」那迁移到这个代码上也是一样啦！网页对应不同的屏幕标准得自动适应，那代码就得采用相对的，而不是绝对的！
推荐阅读：
