一篇真正教会你开发移动端页面的文章

链接  手淘

 实例

苑一峰 响应式布局

各种布局的优缺点

 rem

vw布局

 

重构

px这个像素有两层意思,

 

我们通常设置的px 是一种抽象的css, 在pc上, 和设配的像素是一致的,

 

但是在手机中, iphone高清屏, 本来一平方厘米放10个像素, 但为了色彩更清晰, 会在一平厘米堆100个像素;

 

就像画布一样, 同样一盒色彩染料, 分布在越大的画布, 色彩就越模糊,  分布在越小的画布上, 色彩就越清晰;

 

 

举例:   

i 5 i6 
640px 750px 设计稿 也是 手机设备的像素, 设计稿就是根据手机来设置的

320px 375px device-width 这个是理想视口, 注意 device-width并不是设备宽度, 而是理想视口宽度,  这里只是iPhone起名不慎

------- 以 i6为例

width = device-width 这样布局视口也变成了375;

所以如果根据750的设计稿来设置, 一个侧边栏设置成200, 在布局视口就占了一大半位置, 显然不是我们想要的;

所以需要改变 device-width 变成 750, 这样布局视口也就会根据750来显示;

但如果直接把device-width变成750, 会出现横向滚动条, 因为屏幕其实正常的css只有375;

----------

如何变成750 , 并能整个设计稿放入手机, 并且不出现滚动条? 这需要缩小initial-scale = 0.5;

这样一个css就是1个iphone6的一个物理像素了, 这个css像素实际上市比"正常的css实际宽度变小了一半", (css的个抽象概念, 所以可以缩小);

 

一个屏幕css宽的像素正好是 750px;

 

------------------------------ 现在又有一个问题, 就是设计稿都是 750 宽的; 如果缩小一半, 是可以适配 iphone6, 但是去适配 iphone5还是会出现滚动条, 因为 iphone5是320

 

解决这个问题, 就需要用到相对宽度, 把html 到最小的div, 所有的页面元素的宽高, 都设置成 rem;

 

rem是一个比例, 类似 百分比,  比如 200px的div 在 750 的设计稿 的比率是  26.6666%;  

 

( 把设计稿 分成10分,  那么一个rem可以拥有 75个像素,   200/75 =  2.6666rem,  如果 750的设计稿, 转换成rem,  宽度就是 10个rem  )

 

所以 2.666rem是个相对值 ,不是绝对值,  因为在不同手机 document.documentElement.clientWidth 是不同的, 所以 2.666rem代表的css宽度也是不一样的

 

在iphone6 是200px   在 ipone5 是  640/10 * 2.6666  = 170px;

750px 的body宽度 在 iphone5 是:   64 * 10rem =  640px  ,  刚刚好是 initial-scale 缩小一半后, 理想的iphon5视口;

 

这样就实现了一个设计稿 适配了 各种屏幕大小  dpr 的手机;