2020-02-29

rem布局的方法

前言
为了实现页面的内容大小在用户自由调整窗口，或是切换显示设备的时候，比例不变，这就是rem布局 以前我们用的办法是给元素设置百分比宽高。可百分比是以父容器的大小为参照的，如果父容器是整个窗口还好，可以自定义子元素宽高比例，在写一些比较复杂的页面时，作为父元素的容器很多，那样任何子元素的宽高都要换算为父容器的宽高，实在是太麻烦了，如果统一参考宽高不就方便了吗？ 今天来自逆战班的我给大家介绍一下
———————————————————————————————————————————
神奇的vw单位 就是以浏览器可视窗口大小作为参照的
vw -> view with vh -> view height
这是相对单位：表示把屏幕宽度自动分成100vw 和高度分为100vh vw/vh：把窗口分为100份，1vw等于窗口宽度的1%
利用相对单位才能实现rem布局，rem到底是什么意思呢？
rem：是一个相对单位，1rem等于根元素的font-size值
假设屏幕的宽是375px -> 100vw == 3.75px=1vw
假设屏幕的宽是414px -> 100vw == 4.14px=1vw
例如，iPhone 6 -> html 的font-size -> 100px 1vw == 3.75px？ -> 多少个vw == 100px -> 26.666667vw -> 100px

只需要在默认样式下面加上这一段，就实现了
html{ font-size: 26.666667vw;}
body{ font-size: 16px; }
iPhone 6 plus -> html 的font-size -> 100px 1vw == 4.14px？4.14px*26.666667 -> 110.4px
选择iPhone 6 -> html 的font-size 为100 是为了好计算，也可以用工具辅助开发
使用VS Code 插件：px to rem 把html的 font-size 设置一下 宽高先打出像素单位 选中一片代码，按下alt + z 就把所有的px单位变成rem单位了
实例
*{ margin:0; padding:0;}
html{ font-size:26.666667vw;}
#box{ width:1rem; height:1rem; background:red;}
#box1{ width:0.55rem; height:0.55rem; margin:0rem; background: grey;}
#box2{ width:2.3333rem; height:0.7333rem; margin:0rem; background: yellowgreen;}
…
运行结果如下

注意：PC端 用的是版心布局，不用rem布局

如何动态设置font-size
把html默认font-size 看作100px 那么使用默认字体大小的文本 就会变成100px 以html 的font-size 做字体大小，这就需要重置font-size 就是 body{ font-size: 16px; }

直接做rem布局 思路如下
按照一种设备去做屏幕自适应 -> iPhone 6 => 版心375
psd 把图层名字改成png格式即可 直接得到图片

上下两块儿固定，中间滑动怎么做？小提示如下
html{ font-size:26.666667vw;}
body{ font-size:0.16rem;}
#main{ display: flex; height:100vh; flex-direction: column;}/* vh 规定了相对高度是窗口高度*/
#list{ flex:1; overflow-x: hidden; overflow-y: auto;}/x轴方向上隐藏，y轴方向上自动，这样就实现滚动了/

html{ font-size: 26.666667vw;}
body{ font-size: 16px;}
#first{ width: 750px; height: 1751px; border: 1px black solid; box-sizing: border-box;
display: flex; flex-wrap: wrap; align-content: flex-start; }

html,body{height: 100%;} /这样也能自适应浏览器的高度/
#main{ height: 100%; display: flex;}

那么是怎么实现等比放大的？只是用浮动和定位 ，单位都是rem，都没用弹性 就做到等比放大了，因为rem单位是相对的，永远是按原来的比例，如果窗口高度不足则会溢出滚动显示
弹性flex 主要是用于流式布局
小技巧：有的零散文本部分最好单独一个容器
#main .content-pic img{ width: 100%; height: 100%;} /这样在页面宽高被自由伸缩后图片也被伸缩，因为图片的宽高都是100%处理的，同时最初设置html body 的100% 使得容器大小比例跟页面大小比例同步走，可以用js 让图片等比例伸缩，不足则溢出隐藏，css不能完成/