本文详细解释了rem单位的作用，以及响应式、流式和弹性布局的区别与应用场景。强调了rem与媒体查询的结合、flexible.js的使用以及vw、vh在视口适应中的角色。同时讨论了CSSGrid、百分比布局、字体单位em和rem，以及如何优化图片布局以适应不同设备
rem 单位实际上既不是响应式布局、也不是流式布局或弹性布局的概念。rem 是一种相对长度单位，它是相对于根元素（html 元素）的字体大小来计算实际长度的单位。
响应式布局、弹性布局和流式布局是网页设计中常用的三种布局方式，它们各自有不同的特点和应用场景。
-
响应式布局（Responsive Layout）： 响应式布局是一种可以根据用户设备的屏幕尺寸和分辨率来动态调整页面布局的设计方法。通过使用媒体查询（Media Queries），开发人员可以为不同的屏幕尺寸设置不同的样式表，使网页在不同设备上都能够呈现最佳的显示效果。响应式布局可以适应各种设备，如桌面电脑、平板电脑和手机等。
-
弹性布局（Flexible Layout）： 弹性布局是指通过相对单位（如百分比）和弹性盒子模型（Flexbox）等技术，在页面布局中使用相对尺寸和比例，使得页面中的元素能够根据屏幕大小或父容器的尺寸进行动态调整。弹性布局能够让页面更好地适应不同尺寸的屏幕，提高页面的灵活性和可扩展性。
-
流式布局（Fluid Layout）： 流式布局是一种相对于固定像素的布局方式，通过设置元素的尺寸为百分比或em单位，使得页面中的内容能够根据浏览器窗口的大小进行伸缩和调整，从而实现页面的自适应。流式布局可以确保页面内容在不同分辨率的屏幕上都能够流畅显示，并且适应性更强。
总的来说，响应式布局主要侧重于适配不同设备，弹性布局注重于元素之间的相对排列和伸缩，而流式布局则侧重于页面内容的流动性和自适应性。在实际的网页设计中，通常会结合使用这三种布局方式，以达到更好的视觉效果和用户体验。
一、固定布局（pc端）（静态布局）
以像素作为页面的基本单位，不管设备和浏览器宽度，只设计一套尺寸。（实际情况下没啥用）
二、根据不同的分辨率，加载不同的CSS样式文件（可切换的固定布局）自适应布局（CSS样式就得写几套，太麻烦了）
<script>
const screeenWidth = window.screen.width
// 分辨率大于等于1680，大部分为1920的范围情况下，调用此css
if(screeenWidth >= 1680){
document.write('<link rel="stylesheet" href="css/index_1920.css">');
}
// 分辨率在1600-1680这个范围的情况下，调用此css
else if(screeenWidth >= 1600){
document.write('<link rel="stylesheet" href="css/index_1600.css">');
}
// 分辨率小于1600的范围情况下，调用此css
else{
document.write('<link rel="stylesheet" href="css/index.css">');
}
</script>注意这里的js一定要写在<head></head>标签里面，这样在加载页面内容之前，可以提前把css样式表加载出来。
三、rem布局（移动端）
1、媒体查询结合 rem 布局
媒体查询动态修改根元素的大小，使得 rem 一直在跟着变化，响应式就成功了。
2、flexble.js 和 rem 布局
简洁高效的 rem 适配方案 flexible.js
它的原理是把当前设备划分为10等份,但是不同设备下，比例还是一致的。
我们要做的，就是确定好我们当前设备的html文字大小就可以了
下载地址：https://github.com/amfe/lib-flexible
实现详情
1.下载 flexible.js 放到项目目录里去
│ index.html
│
├─css
│ index.css
│ normalize.css
│
├─images
└─js
flexible.js2.引入flexible.js
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<!-- 引入我们的flexible.js 文件 -->
<script src="js/flexible.js"></script>
<title>Document</title>
</head>index.css
body {
min-width: 320px;
max-width: 750px;
/* flexible 给我们划分了 10 等份,所以应该是10rem */
width: 10rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica;
background: #f2f2f2;
}3.完美的响应式弹性布局 vw + vh + rem 屏幕适配方案
a. vw、vh是基于视口的布局方案，故这个meta元素的视口必须声明。（解决宽高自动适配）
<meta name="viewport" content="width=device-width,initial-scale=1.0">
b. rem布局-解决字体适配
rem布局原理：根据CSS的媒体查询功能，更改html根字体大小，实现字体大小随屏幕尺寸变化。
@media only screen and (max-width: 1600px) and (min-width: 1280px){
html{
font-size: 14px;
}
}
@media only screen and (max-width: 1280px) and (min-width: 960px){
html{
font-size: 12px;
}
}
@media only screen and (max-width: 960px){
html{
font-size: 10px;
}
}c. vw、vh、rem的使用
<template>
<div class="box">
</div>
</template>
<style>
.box{
width:50vw;
height: 20vh;
line-height: 20vh;
font-size: 1.5rem;
margin:0 auto;
font-weight: bold;
background-color: rgba(255,255,255,0.8);
}
</style>上面代码中的50vw代表了此div占据视口宽度的50%、高度占据视口高度的20%，并且会随着视口的变化，进行自适应；字体则是1.5倍的html根字体大小，并且根据媒体查询进行字号变化。
四、弹性布局
-
Flexbox（flex）布局
-
CSS Grid 布局：CSS Grid Layout 是一种二维网格布局系统，通过将容器划分为行和列的网格来实现布局，可以灵活控制元素在网格中的位置和大小。与 Flexbox 不同，Grid 布局更适用于复杂的多列布局需求。
-
table 相关属性：在一些特定场景下，可以使用 display 属性将元素设置为 table 相关的值（如 table、table-cell、table-row 等），模拟表格布局的方式来实现弹性布局效果。不过这种方法通常在处理复杂布局时会显得笨重。
-
float 属性：虽然 float 主要用于实现文字环绕图片等效果，但在一些早期的布局设计中，也曾经利用 float 实现一定程度上的弹性布局效果。但是相比于 Flexbox 和 Grid 布局，float 的应用范围较为有限。
-
calc() 函数：calc() 函数可以进行简单的四则运算，如计算元素的宽度或高度。结合百分比、像素等单位，可以实现更灵活的布局设计。
五、流式布局
-
使用百分比布局：设置元素的宽度、高度、内边距等属性为百分比，使其随着父容器的大小按比例进行调整。
-
流式图像（Fluid Images）：将图像的宽度设置为百分比，让图像能够随着屏幕大小的变化而自适应调整大小。
-
流式文本（Fluid Typography）：使用相对单位（如em、rem）设置字体大小，让文字在不同屏幕尺寸下保持良好的可读性。
六、响应式布局
1.媒体查询
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。
Link元素中的CSS媒体查询
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
在网页代码的头部，加入一行viewport元标签（CSS3必须设置）
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
viewport：视口
width=device-width: 告诉浏览器将页面宽度设置为设备的屏幕宽度，这样网页将会根据设备的屏幕大小来自动调整和适配布局，以确保内容在不同设备上展示时能够更好地呈现和适应。
initial-scale：[0,10] 初始缩放比例，1表示不缩放
minimum-scale：[0,10] 最小缩放比例，最好不小于1
maximum-scale: [0,10] 最大缩放比例，最好不小于1
以上3个属性的值最好都控制在1-10，尽量往放大的方向走，小于1可能会造成布局的混乱
user-scalable: yes／no 是否允许手动缩放页面，默认值为yes语法：
/* 大屏幕 */
@media only screen and (min-width:1200px) {
对应的样式
}
/* 中等屏幕 */
@media only screen and (min-width: 992px)and (max-width: 1199px) {
对应的样式
}
/* 小屏幕 */
@media only screen and (min-width: 768px)and (max-width: 991px) {
对应的样式
}
/* 手机端显示 */
@media only screen and (max-width: 767px) {
对应的样式
}2.用百分比去写元素的宽度，不要写绝对宽度
.mybox {
width: 30%;
}
这里需要注意div宽度的计算方法，CSS盒式模型的宽度设置有两种模式：
width = 内容宽度
实际总宽度 = width + padding + border
这种情况下设置了 width 后，内容宽度不变，而调整 padding 和 border 都会使得div的实际总宽度变化
width = 实际总宽度
width = 内容宽度 + padding + border
这种情况下设置了 width 后，div总宽度不变
可以通过设置 css 的 box-sizing 属性来控制
content-box：width = 内容宽度 (默认)
border-box：width = 实际总宽度3.让子元素撑起父元素的高度，而不要写绝对高度
.parent {
width: 30%;
}
.child {
width:100%;
height:100px;
}4.字体使用相对大小 “em” 或 “rem”
h1 {
font-size: 2rem;
}
1.浏览器默认字体为 16px ，2rem 即 2 * 16px = 32px
2.em（font size of the element）是指相对于父元素的字体大小的单位，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，因此 em 的大小并不是固定的。
/* 设置段落字体大小为 16px */
p {
font-size: 16px;
}
/* 设置段落内部元素的宽度为 2em */
p .inner-element {
width: 2em; /* 宽度为当前字体大小的两倍，即 32px */
}
/* 设置标题字体大小为 20px */
h1 {
font-size: 20px;
}
/* 设置标题的上下边距为 0.5em */
h1 {
margin-top: 0.5em; /* 上边距为当前字体大小的一半，即 10px */
margin-bottom: 0.5em; /* 下边距为当前字体大小的一半，即 10px */
}
3.rem是指相对于根元素的字体大小的单位,目前，除了IE8及更早版本外，所有浏览器均已支持rem。
对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。
这些浏览器会忽略用rem设定的字体大小。
h1 {
font-size: 32px;
font-size: 2rem;
}5.图片的大小也用百分比表示
img {
width: 100%;
}
也可以设置 max-width，这样一来图片最大不会超过原始尺寸，避免图片由于放大而模糊
img {
max-width: 100%;
width: auto;
}
扫一扫
4087
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
