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

Posted 仔行天下

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一篇真正教会你开发移动端页面的文章相关的知识,希望对你有一定的参考价值。

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

psd图:
现在移动端的设计图一般以iphone5(640px)和iphone6(750px)为准,ps左下角放大到100%,看宽度是多少,就是以多少为准。本篇以iphone6(750px为准),其它尺寸道理一样。psd原稿按照设备像素来设计的。

iphone5理想视口像素:320*568
iphone5的设备像素是:640*1136;
dpr=2

iphone6理想视口像素:375*667
iphone6的设备像素是:750*1334;
dpr=2

dpr=设备像素个数/理想css像素个数

window的全局属性可以测试设备比:devicePixelRatio

web开发基于布局视口,现在将布局视口的宽设置为理想视口的宽,width=device-width,
所以现在你眼里的屏幕宽度对应的css像素是375*667;


实例一:
第一步
你测量了psd上一个正方形:200px*200px
你在代码写上了200*200px,打开浏览器一看,傻眼了,比例明显不对。

原因:psd原稿尺寸是按照设备像素来设计的,我们按照phone6的尺寸,所以设计稿的尺寸是iphone6的设备像素尺寸,是750*1334,而我们css中的样式是基于布局视口计算的,由于页面写上了标签
<mata name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable="no"/>
width=device-width这段代码是让布局视口等于理想视口,最终导致:布局视口是375*667px,
你写的200*200是基于750*1334,
而你的css对应屏幕的是375*667;
所以不对;
解决:width:100px height:100px,就正常了

第二部:
根据上面,psd总宽750px,测元素宽200px,而我们真正做页面基于布局视口,布局视口是375px,正好是设计稿的一半,所以应该将测得尺寸除以2,于是修改代码:100px*100px,现在效果一样了
但是,我们知道测得除以2,111除以2得55.5,计算机或手机没办法显示不到1像素的像素值,计算机或手机将自动补全为1,显示是56像素,这不是我们要的。

写页面的时候已经将布局视口=理想视口了
缩放比为1的dpr(devicePixelRatio)=设备/理想(屏宽css,开发者眼里的css)

元素 设备像素
问题:200*200 750*1334 设计稿

元素css 理想视口屏宽
100*100 375*667 iphone6
100*100 x 414*736 7plus 比例又不一致了,所以不能直接除以2

750/414=200/x x=200*(414/750) x=测*(设备理想视口宽/psd宽)

所以:
不同的手机,布局视口(现在也等于理想视口也等于屏宽)不一样,比例又不一致了,所以不能直接除以2。直接除以2不能在所有设备显示完好

于是:如果 布局视口尺寸==设备像素尺寸,那么测得尺寸可以直接用于开发页面,其它的手机,只需要进行等比缩放就OK了
如果:我们改变了理想视口尺寸的话,也就改变了布局视口尺寸,==>测得即写得;如何改变理想视口尺寸呢?如何让理想等于设备?
解答:缩放是缩小或放大css的过程,以iphone6为例,由于iphone6的dpr是2,当缩放比是1,
一个css像素尺寸对应2个设备像素尺寸,
当将一个css像素缩小到原来一半,即原来的0.5倍,缩小倍数=设备像素比的倒数;
解决:scale=1/window.devicePixelRatio 设置scale动态,保证布局永远等于设备
布局永远等于设备,就会出现测得即写得;
width:200px height:200px

第三步:iphone5与iphone6对比效果,由于iphone5与iphone6的设备像素不一致,ihpone6保持与设计图一致,而iphone5不一致。效果偏差
解决:利用rem

以上是关于一篇真正教会你开发移动端页面的文章的主要内容,如果未能解决你的问题,请参考以下文章

教会你开发移动端页面的文章

移动端web开发进阶

移动端Web开发 基础知识

探究移动端开发

移动端web开发

前端页面开发浅谈:PC 端设计如何“完美”迁移到移动端?