响应式布局

最新推荐文章于 2023-10-13 10:18:13 发布

Liszter

最新推荐文章于 2023-10-13 10:18:13 发布

阅读量245

点赞数

分类专栏：开发流程文章标签： web css3

本文链接：https://blog.csdn.net/qq_39198394/article/details/116274058

版权

开发流程专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了多种响应式布局的实现方式，包括使用媒体查询针对不同设备设定CSS，利用flexbox进行弹性布局，通过rem调整字体大小以及运用scale()实现大屏项目的适配。每种方法都有其适用场景，如媒体查询适用于多设备适配，flexbox适合模块化布局，rem适合动态调整字体，而scale()则适合大屏项目。通过对这些技术的理解和应用，可以提升网页的响应式设计能力。

摘要由CSDN通过智能技术生成

响应式布局用过哪些？实现方案有哪些？

flex布局
媒体查询
rem 弹性布局
scale() 缩放
% 这个比较基础就不多说了

方案

使用媒体查询（针对设备展示的类型），来设定不同的css方案。
具体思路：
- 针对打印时的样式引入
```
<link rel="stylesheet" type="text/css" href="print.css" media="print"> 
```
  针对计算机屏幕时的样式引入
```
<link rel="stylesheet" type="text/css" href="theme.css">
```
  总结：说白了就是写两套css。
使用媒体查询（针对设备屏幕宽度），来设定不同的css方案。
1. 主要是通过算屏幕的大小，来使用不同的代码段。
```
@media screen and (max-width: 200px) {
		color: red;
}
@media screen and (min-width: 201px) and (max-width:400px) {
	color: yellow;
}
```
  总结：相当是查询到屏幕的大小，然后根据这个尺寸使用不同的一套css代码块。
使用flex进行一些弹性的布局
1. 父元素使用 display: flex; 子元素设置一些 flex: 1;之类的。
2. 主要能理解一些flex-* 的场景就好。
3. 大致解释 flex
  1. justify-content: flex-start;
  2. justify-content: flex-end; 相对于主轴末尾开始展示
  3. justify-content: center; 想对于主轴居中
  4. flex-wrap: wrap; 换行
  5. flex-wrap: no-wrap; 不换行内容可能会被压缩
  6. align-item: center ; 单行居中
  7. align-content: center ; 父盒子下的所有元素相对于交叉轴居中
  8. flex: 1; 是一种缩写— 取决于下面三个元素
  9. flex-grow: ; 放大占比
  10. flex-shrink: ; 缩小时的占比
    10.flex-basis: ; 设置这个元素的宽度
  总结：有点恶心，只是在部分的模块使用，大屏项目不太适合。

使用rem布局
rem 主要是根据html的根元素的大小来变化的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body, html {
          margin: 0;
          padding: 0;
        }
        html {
          font-size: 30px;
        }
        body {
            font-size: 1rem;
        }
    </style>
</head> 
<body>
    <div class="container">
        自适应布局
    </div>
</body>
<script>
let c =()=> {
    let w = document.documentElement.clientWidth;
    let n = (20*(w/320)>40?40+'px':(20*(w/320)+"px"))
    console.log(n);
    document.documentElement.style.fontSize = n;
}
window.addEventListener('load',c)
window.addEventListener('resize', c)
</script>
</html>

总结：这个办法挺好，就是之后手算rem很蓝瘦。主要的原理是给window对象添加监听方法： load和resize。然后计算出根部的 font-size 属性，然后更新。

使用js获取当前设备型号，然后设置对应的rem大小
实现思路和4号方案差不多，这个是进入页面先获取下当前应用的设备类型。
```
Navigator 对象包含有关浏览器的信息。
document.write("浏览器信息: " + navigator);
```
总结：也不错。
针对大屏项目使用scale()
针对pc端大屏项目，UI设计出一套界面，然后前端按照UI的开发，然后添加resize监听事件。根据界面的宽高变化的最小值和页面的宽高，得出一个比例，然后让父元素进行缩放transform：scale(计算的比例).

例如：大屏设计出来的界面是 400200 的，初始前端设置scale为1
之后界面变成了 500300，那么就根据这个 500和300 算出放大的比例。
500/400 = 1.25； 300/200=1.5. 采用最小的比例 1.25，将整个界面进行缩放 transform: scale(1.25); 当然，这里需要js操作dom来实现。

总结：非常适合大屏项目。另外我看淘宝的大屏项目就是采用的这个方案。