本文目录
WEB二、移动端常见布局
目录：2、流式布局 3、flex布局 4、rem适配布局-media 5.less 不管网页的宽度怎么调整，两个div会分别占50%的宽度： 但是注意这里设置了 最大宽度和最小宽度 效果图： 一行三个盒子，两边的盒子大小固定不变，中间的盒子随着窗口的大小而变化。 效果图： 1、页面布局文字能否随着屏幕的大小变化而变化？ 2、流式布局和flex布局主要针对于宽度布局，那高度如何设置？ 3、怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？ 1、em单位例子： 2、rem单位例子： 当样式比较繁多的时候，我们可以针对不同的媒体使用不同的stylesheets（样式表）。 原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。 css是一门非程序语言，没有变量、函数、scope（作用域）等概念。 如下例子的缺点： 保存 less 文件 自动会生成css文件： 引入css文件：
【CSS】深入探究rem响应式原理
em ：作为font-size单位时，其代表父元素字体大小，作为其他属性（line-height）单位时，代表自身字体大小 例： 《div style="font-size:16px"》 《div style="font-size:2em;line-height:2em"》《/div》 《/div》 第二个div的font-size:2em=2 16px=32px line-height:2em=2 32px=64px rem ：作用于非根元素时，相对于根元素字体大小；作用于根元素字体大小时，相对于其初始字体大小(浏览器默认字体大小) 例： html{font-size:2rem} 2 16px=32px p{font-size:2rem} 2 32px=64px 综上，em是为字体和行高而生的，有时候子元素字体就应该与父元素相关。而rem布局的本质是等比例缩放
①让根元素的字体与屏幕宽度产生关系，即随屏幕宽度变化而变化 ②其他元素的大小根据根元素字体生成rem单位，例如： html{font-size:width/100},假设设置根元素字体为屏幕宽度的1%，（注意：屏幕宽度是动态变化的），则屏幕宽度的1%就代表1rem。假设现在有p元素，我们就可以作如下设置： p{width:5rem;},则p的宽度就为屏幕的5% 现在你明白rem的原理了吧，那如何动态获取屏幕宽度呢？这里我们介绍两种方法： ①通过js设置 window.onload=function(){ document.documentElement.style.fontSize = document.documentElement.clientWidth/100 +’px’ } 这样就实现了设置根元素的字体大小为屏幕宽度的1% ②vw CSS3引进了vw vh的概念，vw是指视口宽度的1%；vh是指视口高度的1%。因此我们就可以直接作如下设置： p{width:5vw} vw缺点就是兼容性没有rem好
rem是弹性布局的一种实现方式，强调的是等比例缩放，弹性布局是响应式的一种。响应式布局强调的是不同屏幕要有不同的显示（例如我有行照片墙，在PC iPad 手机都一行展现不同的数目，你可能会想到flex）
①字体不能用rem 字体不是线性关系，设置了根元素字体大小，会影响所有没设置字体大小的元素，因为 字体会继承 字体如何实现响应式：通过body字体的大小来实现，同时所有设置字体的地方都用em，例： body{font-size:16px;} p{font-size:1.2em;} 但是我们一般遇到的设备有手机、iPad、电脑，如果想要实现不同宽度字体显示大小不一样，可以使用媒体查询： @media screen and (min-width:320px){ body{font-size:16px;} } @media screen and (min-width:480px){ body{font-size:18px;} } @media screen and (min-width:960px){ body{font-size:20px;} } ②根元素字体小于浏览器默认字体 假设屏幕宽度是780px，html字体大小780/100=7.8px，小于浏览器默认字体16px，怎么办。这个时候可以设置html字体大小780/10=78px,则其他元素的参考1rem就是屏幕宽度的1/10，再根据这个参考系来计算。其实道理是一样的
参看链接： ① Rem布局的原理解析
移动端布局什么时候用flex什么时候用rem
由于最近在做公司移动项目的重构，因为要实现响应式的开发，所以大量使用到了rem的单位，觉得这个单位有点意思。但是现在貌似用他的人很少。上一篇文章我分享了淘宝写的一篇rem的介绍，介绍的非常全面，但是他们似乎都把关注点放在了字体单位上了，其实rem不只是能应用到字体上面
