js学习总结----响应式布局之流式布局

苹果手机的尺寸:5s及以下都是320px  6是375px宽度   6plus是414px宽度

常用的安卓尺寸:320、360、480、540、640、720...

在真实项目中，设计师给我们的设计稿一般都是:640*960 / 640*1136 / 750*1334

响应式布局的解决方案:

　　1）、流式布局法

　　容器或者盒子的宽度一般都不写固定的值，而是使用百分比（相对于视口区域的百分比）

　　其余的样式:字体、高度、margin、padding等等都按照设计稿上标注尺寸的一半来设置

　　对于有些屏幕尺寸下，我们设置的固定值看起来不是特别的好看的话，使用@media进行微调整

特殊情况:设计师的设计稿是640px,我们的素材图也是640px的，这样的话在iphone6/iphone6 plus展示的时候，图片不够大、对于这种情况我们需要单独的找设计师要一张更大的图。

　　@media all and (-webkit-min-device-pixel-radio:2) and (min-width:321px){}

　　@media all and (min-width:641px){}　

　　2）、REM响应式布局

　　我们做的H5页面只是在移动端访问(REM不兼容低版本的浏览器)

　　REM:当前页面中元素的REM单位的样式值都是针对于HTML元素的fontSize的值进行动态计算的

　　第一步:从UI设计师拿到设计稿(PSD格式的设计稿) 640*1136

　　第二步:在样式中给HTML设计一个fontSize的值，我们一般都设置一个方便后面计算的值，例如:10px、100px...这里我们之所以用100px,主要是浏览器最小的字体大小都是12px，用10px比例计算的结果和真是UI设计稿会存在一点点的偏差

　　html{

　　　　font-size:100px;/*1REM = 100px*/

　　}

　　第三步:写页面，写样式

　　完全按照设计稿的尺寸来写样式，此时不用管任何的事情，设计稿给你的宽度、高度、字体大小、margin、padding的值是多少，我们就写多少

　　但是我们在写样式值的时候，需要把得到的像素值除以100，计算出对应的REM的值，我们设定的也都是REM的值（值得注意的是:真实项目中外层盒子的宽度我们一般还是不写固定值，我们沿用流式布局法的思想，我们用百分比的方式布局）

　　第四步:根据当前屏幕的宽度和设计稿的宽度来计算我们HTML的fontSize的值(当前屏幕的宽度/设计稿的宽度*fontSize)

　　设计稿:640   600*300  font-size=100

　　手机:320   300*150 font-size=50

当页面的宽度大于设计稿的宽度的时候，可以通过判断clientWidth 然后不再修改fontSize的值，页面大小不在改变

有时候也会检测浏览器和项目，当两个都是pc端的或者移动端的，来跳转到相对应的项目。window.location.href = xxx