css样式布局和rem用法组合
viewport用于约束网页中的顶层块元素，即决定网页的大小。网页首先在视口中呈现，然后通过视口放回浏览器窗口。网页的渲染过程如下:pc视口的大小和浏览器一样，所以网页是以1:1的比例放在浏览器窗口上的，而移动视口有点特殊。手机视口宽度比手机屏幕宽，一般是980px或者1024px。在网页被呈现在视窗上之后，整个视窗将被缩放到屏幕的宽度，以便在移动屏幕上显示整个网页，使得网页看起来作为整体被缩放。
如何设置视口，禁止视口页面缩放，可以自己动手。
(主要针对移动端和pc端网页，需要实现等比例放大缩小页面的效果)
大概有以下几种
1.流体布局
流体的布局其实就是宽度带百分比，高度带定值，宽度带百分比的布局，以适应不同宽度的屏幕。
为了适应手机上不同尺寸的屏幕，我们可以在定义元素宽度的时候写百分比。该百分比是相对于屏幕宽度的，因此所有宽度都可以是自适应的。在高度方向，因为网页的高度是不确定的，所以我们可以把高度写成一个固定值(px)。这种布局方法称为流体布局。
注意两个概念
2.弹性盒模型的柔性布局
这种布局方法是在css3中添加一些辅助布局的样式属性来进行布局的一种方式。
3.rem布局
Rem是一个相对长度单位，通过它可以实现元素宽度和高度的比例缩放，从而完成不同宽度屏幕的适配。
4.响应式布局(媒体询问)
通过样式动态查询屏幕的宽度，动态切换样式以适应不同宽度屏幕的布局。
自举是最典型的一种。
有待补充
在实际应用中，pc页面需要实现响应式的比例缩放(即自适应)，rem灵活布局是一种现实而理想的解决方案。
移动端可以用rem布局，也可以用px(主要是flex)，这要看产品是怎么设计的。
Css3规定1rem的大小是根元素 Rem其实是一个单位，是一个相对的单位根em。Rem是相对于html元素的字体大小的根(根元素的大小)单位。 rem布局原则 就是根据一个html根元素来控制网页的布局，实现类似自适应比例缩放的布局。 快速眼动优势 通过修改html文本的大小，改变页面中元素的大小，实现对页面的整体控制。 快速眼动的作用 通过设置根元素 简单用法 Cssrem插件安装在vscode中，通过它可以自动计算rem值。 具体设置如下 注意:设置后需要重启vscode软件，否则计算出的rem值会错误。 有待补充 可以通过js或css媒体查询来更改。 有待补充 rem自适应布局适合用于pc端吗？ PC端用rem首先要用resize()函数把平常用的remjs包含起来，因为手机屏幕宽度固定，而pc端可以改变浏览器窗口大小。
手机是否支持flex控件？
其实手淘里面很多地方也使用了flexbox布局。手淘的Rem并不是仅是用来适配布局，其更主要的功能是用来适配不同设备的视窗。当然，很多同学担心flexbox的支持度。首先已经放弃了安卓2.0的设备，而安卓4.0支持flexbox。如果你仔细查看过源码的话，你会发现，使用的flexbox还是老版本语法。因为在mobile上的浏览器对flexbox的最新语法支持度还是存在很多问题。当然，不管是哪个版本，mobile对flexbox的支持都还只停留在部分属性支持。所以在使用的时候要注意，使用哪些属性，何时使用，并不是说所有的flexbox都可以使用。
flexbox|博客自由标签
自己制作的网页怎么自适应手机端？
说说我知道的方法。其实这个需求应该是实现一侧固定宽度，另一侧自适应宽度，传统的圣杯布局，可以解决这个问题，然而这会导致嵌套太多层。现在我们团队采用的是使用REM进行适配，适配原理：
introduction-for-lnv-mobile-base/针对移动端的前端工作流(2)-使用rem做移动端适配.mdatmaster·mqyqingfeng/introduction-for-lnv-mobile-base·GitHub
当采用REM进行适配，在开发的时候，测量多少就会写多少px，就不用再考虑自适应的问题。