css样式布局和rem用法组合

viewport用于约束网页中的顶层块元素，即决定网页的大小。网页首先在视口中呈现，然后通过视口放回浏览器窗口。网页的渲染过程如下:

pc视口的大小和浏览器一样，所以网页是以1: 1的比例放在浏览器窗口上的，而移动视口有点特殊。手机视口宽度比手机屏幕宽，一般是980px或者1024px。在网页被呈现在视窗上之后，整个视窗将被缩放到屏幕的宽度，以便在移动屏幕上显示整个网页，使得网页看起来作为整体被缩放。

如何设置视口，禁止视口页面缩放，可以自己动手。

(主要针对移动端和pc端网页，需要实现等比例放大缩小页面的效果)

大概有以下几种

1.流体布局

流体的布局其实就是宽度带百分比，高度带定值，宽度带百分比的布局，以适应不同宽度的屏幕。

为了适应手机上不同尺寸的屏幕，我们可以在定义元素宽度的时候写百分比。该百分比是相对于屏幕宽度的，因此所有宽度都可以是自适应的。在高度方向，因为网页的高度是不确定的，所以我们可以把高度写成一个固定值(px)。这种布局方法称为流体布局。

注意两个概念

2.弹性盒模型的柔性布局

这种布局方法是在css3中添加一些辅助布局的样式属性来进行布局的一种方式。

3.rem布局

Rem是一个相对长度单位，通过它可以实现元素宽度和高度的比例缩放，从而完成不同宽度屏幕的适配。

4.响应式布局(媒体询问)

通过样式动态查询屏幕的宽度，动态切换样式以适应不同宽度屏幕的布局。

自举是最典型的一种。

有待补充

在实际应用中，pc页面需要实现响应式的比例缩放(即自适应)，rem

灵活布局是一种现实而理想的解决方案。

移动端可以用rem布局，也可以用px(主要是flex)，这要看产品是怎么设计的。

Css3规定1rem的大小是根元素< html & gt的字体大小的值。

Rem其实是一个单位，是一个相对的单位根em。Rem是相对于html元素的字体大小的根(根元素的大小)单位。

rem布局原则

就是根据一个html根元素来控制网页的布局，实现类似自适应比例缩放的布局。

快速眼动优势

通过修改html文本的大小，改变页面中元素的大小，实现对页面的整体控制。

快速眼动的作用

通过设置根元素

简单用法

Cssrem插件安装在vscode中，通过它可以自动计算rem值。

具体设置如下

注意:设置后需要重启vscode软件，否则计算出的rem值会错误。

有待补充

可以通过js或css媒体查询来更改。

有待补充

rem自适应布局适合用于pc端吗？

PC端用rem首先要用resize()函数把平常用的remjs包含起来，因为手机屏幕宽度固定，而pc端可以改变浏览器窗口大小。

另外pc端一般不用rem主要是对低版本浏览器的兼容性问题，比如从ie9才开始支持rem，但是只是部分支持。ie11才全部支持。ie9,ie10部分支持，例如：rem用在伪元素和缩写样式上就不支持

手机是否支持flex控件？

其实手淘里面很多地方也使用了flexbox布局。手淘的Rem并不是仅是用来适配布局，其更主要的功能是用来适配不同设备的视窗。当然，很多同学担心flexbox的支持度。首先已经放弃了安卓2.0的设备，而安卓4.0支持flexbox。如果你仔细查看过源码的话，你会发现，使用的flexbox还是老版本语法。因为在mobile上的浏览器对flexbox的最新语法支持度还是存在很多问题。当然，不管是哪个版本，mobile对flexbox的支持都还只停留在部分属性支持。所以在使用的时候要注意，使用哪些属性，何时使用，并不是说所有的flexbox都可以使用。

flexbox | 博客自由标签

自己制作的网页怎么自适应手机端？

说说我知道的方法。
其实这个需求应该是实现一侧固定宽度，另一侧自适应宽度，传统的圣杯布局，可以解决这个问题，然而这会导致嵌套太多层。
现在我们团队采用的是使用REM进行适配，适配原理：

introduction-for-lnv-mobile-base/针对移动端的前端工作流(2)-使用rem做移动端适配.md at master · mqyqingfeng/introduction-for-lnv-mobile-base · GitHub

当采用REM进行适配，在开发的时候，测量多少就会写多少px，就不用再考虑自适应的问题。