移动端之在不同尺寸大小的手机上展示同一效果解决方案 by FungLeo
前言,反思
在之前的项目当中,我在CSS中设置html{font-size: 62.5%;},也就是设置为10px,然后全站根据这个根植...,来设置rem单位的样式.这样虽然解决了很多的问题.但是在面对不同宽度的手机的时候,还是需要去自适应设置很多的内容.当然,因为手机分辨率的不同,我们可以自由的将页面设置在320(iphone5s)-414...而且,设计师对我实现的页面还是颇多微词,因为,只有在普通安卓手机上显示是最正常的,5S有点拥挤,6p又有点过宽.
那么,到底TMD有没有一种方式,可以完美的实现设计稿的设计呢?...也就是说,不管你的手机屏幕是多大,屏幕分辨率是多少,都能在页面上完整的还原设计稿.
也就是说,要求就是,大手机上,看着每个元素,包括文字都要大一些.而在小手机上,看着要小一些.全部都整体缩放呢?...当然,比率是一个问题.如,我们以10为比率,并且以720的设计稿宽度来计算,我们会得到如下
320/720*10 = 4.44444
这样的数值.在移动端这没有什么问题,但我们在PC端进行调试的时候就有问题了