关于移动端及flex

我们知道写pc页面的时候，ui设计图是多少px,我们写网页的时候，就会写多少px,这个其实就是由pc端屏幕的物理像素，和我们设计图的css逻辑像素决定的，由于屏幕的物理像素和css逻辑像素比，刚好是1:1，我们能够用这个特性，进行快速切图。但是，移动端是什么样子呢？你看手机屏幕比电脑屏幕小那么多，我们现在按照pc端页面的思维，按照1比1的比例，想想这个页面在手机端显示的效果，屏幕是不是放不下很多东西，而且会不清晰呢？要想放下很多东西而且清晰的话，就是我们的物理像素/逻辑像素，在PC端的是1:1我们已经知道了，就是我电脑屏幕多大，UI图就给我多大。同理在手机端就是，我的屏幕就是这么大一点了，在同样的ui图下面，我在手机屏幕上，看到对应的UI图的区域就会变大，否则，这UI图就盖过手机屏幕了。要想我的手机把UI图完全显示出来，这个时候物理像素逻辑像素就不是1:1了。我们用dpr 设备像素缩放比来表示。为PC端的时候，dpr的值为1，在手机上dpr的值为多少呢？对于手机屏幕来说，750px的页面宽度是一个安全的最大宽度，保证了移动端页面两边不会留白。注意这里的px是css逻辑像素，与设备的物理像素是有区别的。

笔者做移动端布局的时候，喜欢用flex布局。

在头部引进rem.js

new function() {

var _self = this

_self.width = 750// 设置默认最大宽度

_self.fontSize = 100// 默认字体大小

_self.widthProportion = function() {

var p = (document.body && document.body.clientWidth || document.getElementsByTagName('html')[0].offsetWidth) / _self.width; return p < 0.5 ? 0.5 : (p > 0.75 ? 0.75 : p)

}

_self.changePage = function() {

document.getElementsByTagName('html')[0].setAttribute('style', 'font-size:' + _self.widthProportion() * _self.fontSize + 'px !important')

}

_self.changePage()

window.addEventListener('resize', function() { _self.changePage() }, false)

}()

比如UI图中一个div,宽度是750px，高度为10px,里面的字体大小为15px；

那么我们可以这样写

div{

width:7.5rem;

height:0.1rem;

font-size:15px;

}

接下来关于flex布局https://www.cnblogs.com/smart-girl/p/9101364.html