nextjs中rem和媒体查询实现响应式布局

响应式布局

指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。
响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，
通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。

@media (max-width: 600px) {
  .contents {
    flex-direction: column;
  }
}

em 的计算是基于父级元素的

Chrome浏览器默认显示最小字体为12px
Chrome默认最小字号是12px(最新版英文也有此问题)，这个是Chrome为了更好显示中文设计的。
但是这样一来就会出现，设置为8px字体的元素在Chrome显示仍为12px，导致网页排版错误的问题。

.title {
    font-size: 8px
}

要使用小于默认最小的字体，通过缩放实现，这里是最小字体为12px,仅仅是针对字体，不可与间距的距离设置混淆，间距的距离设置没有浏览器的最小说明。
使用缩放：transform: scale(0.8);

方案一

使用rem实现响应式布局

rem单位都是相对于根元素html的font-size来决定大小的，根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。
因此，如果通过rem来实现响应式的布局，有两种方式：
（1）需要根据视图容器的大小，动态的改变font-size即可（而em是相对于父元素的）。
（2）使用@media媒体查询，根据不同屏幕类型，设置html中基准字体大小，那么以rem为固定单位的元素的大小也会发生响应的变化。

实现原理：

默认的html中font-size=16px，那么我想设置12px 的文字就是：12÷16=0.75（rem），也就是在css中，0.75rem实际是0.75rem*16=12px。1rem究竟是多少px，关键在于html中字体是多大。
也即是说，其实rem就是一个比例大小，所以可以用来实现自适应。

当然，你可以引入 CSS 预处理工具（Sass、LESS 、Stylus等）自动计算 rem 值，这里就不一一举例了。

但是像我这样的懒人或者团队开发中还没有引入CSS 预处理工具的该肿么办呢？只能搬个计算器啪啪啪了吗？别急，你还可以变通一下。我们改变一下 html 的默认 font-size=10px 不就好计算了嘛！Like this：

html{

font-size:62.5%; /* 10÷16=62.5% */
font-size:6.25%; /* 1÷16=6.25% ,此时 16px*6.25%=1px,html默认字体大小改成了1px*/

}

body{

font-size:12px;

font-size:1.2rem ; /* 12÷10=1.2 */
font-size:12rem ; /* 12px÷1px=12(rem),也就是可以使得二者在数字上等价，只更换单位即可 */

}

需要注意的是，为了兼容不支持 rem 的浏览器，我们需要在 rem 前面写上对应的 px 值，这样不支持的浏览器可以优雅降级。其实不用太纠结是默认的font-size:100%，还是设置为font-size:62.5%，如果你引入了 CSS 预处理工具那么自然可以使用默认值，如果由于其他原因使用font-size:62.5% 也无可厚非，完全可以在 body 中重置回你需要的默认 font-size。

使用方案：

html { 
  font-size:6.25%;
}

@media screen and (max-width: 768px) {html{font-size:3.25%;}}
@media screen and (min-width: 768px) {html{font-size:5.25%;}}
@media screen and (min-width: 992px) {html{font-size:6.25%;}}
@media screen and (min-width: 1200px) {html{font-size:7.0%;}}
/*
@media screen and (min-width: 640px) {html{font-size:6.25%;}}
应用上面的公式：

1rem = 1 * 6.25% * 16px
其中：6.25% * 16 = 0.0625 * 16 = 1
所以：1rem = 1px


如果文档宽度小于 300 像素则修改背景颜色(background-color):
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

min-width    定义输出设备中的页面最小可见区域宽度。>= 300px:生效
max-width    定义输出设备中的页面最大可见区域宽度。< 300px：生效
*/

上述使用方案，存在的问题，是屏幕大小划分以及font-size比例可能不适用自己的项目。

• 媒体查询中的关键点：如何选择屏幕大小分割点？

经典的响应式布局框架，bootStrap的划分如下：

• 超小屏幕（手机）: <768px
• 小屏幕（平板）: >= 768px
• 中等屏幕（桌面显示器）: >= 992px
• 超大屏幕（大桌面显示器）: >= 1200px

当在pc端缩放页面时，可以看到自适应布局，当切换到移动端时，也会根据屏幕大小进行响应式布局。
参考文章：https://juejin.im/post/684490...

效果演示网页
使用方案示例