关于移动端及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