标签：老版本 scale main 使用 initial 分辨率 span rem 例子
因为能兼容，手机、平板、PC终端既省钱又省力；
有很多网站的解决办法是，为不同的设备提供不同的mobile版本，或者iPhone/iPad版本。这样效果有保证，但是比较麻烦，同时要维护好几个版本；
于是，“”“一次设计，普遍适用”，根据屏幕宽度，自动调整布局（layout）
第一步： meta:vp标签
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
上面代码的意思是。
viewport是网页默认的宽度高度
content="width=device-width 网页宽度默认屏幕宽度 user-scalable=no,（禁止缩放） initial-scale=1.0,（原始缩放比例） maximum-scale=1.0, minimum-scale=1.0"（最大最小缩放比例）
所有主流都支持，对于IE6-8适用
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
第二部：不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度，也不能使用具有绝对宽度的元素。（重点）
第三部：相对大小字体
使用rem,em对字体进行设置;
rem相对根元素中的fontSize
html{ font-size:100px; //设置根元素上的100px=1rem; }
p{ width:1rem; //100px }
em,相对上级元素
html{ font-size: 100%; //默认是浏览器默认16px=1em||rem }
h1{ font-size: 1em; //1em=16px }
p{ font-size: 2em; //2em=32px margin-top: 1em;//你以为是16px，搓搓，此时1em=32px;被自己重置了 }
怎么选择em,rem？？？
如果这个元素有其他属性与自身字体有关联，使用em,剩余使用rem
例子
html{ font-size: 100%; //1rem||em=16px } .tit{ font-size: 1em; //=16px padding: 1em; //=16px } .titH1{ font-size: 1em; //1em=16px } .titH2{ font-size: 2em; //2em=32px=>1em=32px 所以 padding:32px } .titH3{ font-size: 3em; //3em=48px=>1em=>48px 所以padding:48px }
<h1 class="tit titH1">我是H1</h1> <h2 class="tit titH2">我是H2</h2> <h2 class="tit titH3">我是H3</h2>
所有这个元素中与em相关的尺寸全部改变;
rem则任何尺寸都不进行改变
html{ font-size: 100%;//1rem=16px } .tit{ font-size: 1rem; //1rem=16px padding: 1rem; //16px } .titH1{ font-size: 1rem; //16px } .titH2{ font-size: 2rem; //16px padding=16px } .titH3{ font-size: 3rem; 16px padding=16px }
第四部：流动布局
.main { float: right; width: 70%; } .leftBar { float: left; width: 25%; }
装不下会自动跑到下面去，绝对定位的使用一定要小心；
第五部：css加载media
<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文件。
第六部：媒体查询media
@media screen and (max-device-width: 400px) { .column { float: none; width:auto; } #sidebar { display:none; } } //如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节
第七部：图片响应式
img { max-width: 100%;} //老版本IE使用 img { width: 100%; }
不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。太累了，没条件；
转紫阮一峰响应式布局
标签：老版本 scale main 使用 initial 分辨率 span rem 例子
原文地址：https://www.cnblogs.com/liangfc/p/9123786.html
