【css复习】总结前端各种常用布局适配方案

谭CV

墨衍会员 · AI 创作全网分发码龄9年

关注

原创最新推荐文章于 2026-10-14 12:02:06 发布 1k 阅读 AI 写同款· GEO 优化 ›

1.视口

什么是视口？

在桌面端，视口指的是在桌面端，指的是浏览器的可视区域

移动端，涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）

视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport, “视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小

根据浏览器窗口的大小的单位，不受显示器分辨率的影响

布局视口一般都PC端的页面使用

移动端的页面，一定要设置理想视口

1.1.理想视口

//理想视口有一些兼容性的问题 ，而且有时候会 出现一些莫名其妙的问题
<meta name="viewport" content="width=device-width, initial-scale=1.0">

1.2.标准理想视口

//开发中推荐使用标准理想视口
<meta name='viewport' content='width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no'>

1.3.标准理想视口的含义

设置视口为标准理想视口

meta：用来描述或者设置一个HTML网页文档的属性
        name:描述类型        viewport 视口
        content：要设置或者描述的内容
        width：宽度    device-width：设置视口的宽度等于屏幕的宽度
        initial-scale:页面打开的时候视口放大的倍数值：  默认：1
        maximum-scale：如果允许放大的话，最大能放大到多少倍  默认：1
        minimum-scale：如果允许缩小的话，最小能缩小到多少倍   默认： 1
        user-scalable：是否允许用户缩放页面  默认： no

2.pc端布局

定版心版心一般都是定死的

pc端的页面中很多的元素一般都是固定大小，比如：图片、文本、盒子大小...

使用浮动，定位设置margin 值或者偏移量的时候，一般都是固定值

pc端布局常用标准流，浮动，定位

慎用flex，有兼容问题

3.移动端

flex+流式布局（百分比布局）+rem,配合淘宝的flexible
vw屏幕适配
响应式（pc端+移动端），多用于网站信息展示，内容不多的情况，比如公司官网常用响应式布局
rpx 微信小程序屏幕适配

3.1.rem+flexible

rem

rem是相对于HTML根标签的字体大小的

当HTML根标签中的font-size出现了变化的时候，那么rem应该是跟随一起变化,在页面中使用rem单位的元素，也会跟随一起变化

flexible

淘宝的flexible本质上就是一段js代码。帮助我们做了一件事：当屏幕的大小发生改变的时候，去改变HTML根标签中的字体大小

在淘宝flexible的加持之下，HTML的根标签的字体大小： font-size = 屏幕的宽度 / 10；让html根标签的字体大小设置为屏幕宽度的十分之一。

flexible代码：

flexible将页面分成了10份,若设计稿宽度为320px，在淘宝flexible下面，HTML根标签的字体大小： 32px，则1rem=32px

此时比例为：10份/320px = 1rem/32px

由此可得出固定计算公式：

设计稿的宽度(已知 ) / 手机屏幕的宽度(10rem) = 设计稿中元素的宽(已知) / 手机屏幕中元素的宽度

(function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; function setBodyFontSize() { if (document.body) { document.body.style.fontSize = 12 * dpr + "px"; } else { document.addEventListener("DOMContentLoaded", setBodyFontSize); } } setBodyFontSize(); function setRemUnit() { var rem = docEl.clientWidth / 10; docEl.style.fontSize = rem + "px"; } setRemUnit(); window.addEventListener("resize", setRemUnit); window.addEventListener("pageshow", function (e) { if (e.persisted) { setRemUnit(); } }); if (dpr >= 2) { var fakeBody = document.createElement("body"); var testElement = document.createElement("div"); testElement.style.border = ".5px solid transparent"; fakeBody.appendChild(testElement); docEl.appendChild(fakeBody); if (testElement.offsetHeight === 1) { docEl.classList.add("hairlines"); } docEl.removeChild(fakeBody); } })(window, document);

3.2.vw屏幕适配

vw是可视窗口的宽度单位；相对于视口的宽度，视口被均分为100单位的vw，所以1vw=视口宽度的百分之一；vw始终相对于可视窗口的宽度，而百分比和其父元素的宽度有关，同理，vh就是视口的高度单位了

手机屏幕中元素的宽度 = 设计稿中元素的宽(已知) * 手机屏幕的宽度(100vw) / 设计稿的宽度(已知 )

3.3.响应式适配

一套代码在pc端和移动端都能展示效果，体验还行。

一般可考虑使用媒体查询或bootstrap栅格系统来做

在响应式布局中尽量不要使用flex，以免考虑后期兼容的问题

媒体类型

媒体类型可以理解为不同的设备，如打印机，计算机的屏幕等 ;可以加载不同的媒体类型，一般是 screen 使用得最多

all 匹配所有的媒体类型默认值

screen 匹配计算机显示器

print 匹配打印机设备

/* 匹配所有的媒体类型 */
    @media all {
      body {
        background-color: red;
      }
    }

    /* 匹配屏幕 */
    @media screen {
      body {
        background-color: red;
      }
    }

    /* 匹配打印机 */
    @media print {
      body {
        background-color: red;
      }
    }

媒体特性

可以根据屏幕的宽度，高度等参数进行查询。这些参数就叫做媒体特性

width-宽度

min-width 最少宽度

max-width 最大宽度

height 高度

min-height 最少高度

max-height 最大高度

aspect-ratio 视口的宽高比

min-aspect-ratio 最少宽高比

max-aspect-ratio 最大宽高比

媒体关键字

not 取反

only 实现更好的兼容

and 连接

or 或者

/* 取反 屏幕宽度不为800px的时候 被选中 */
    @media not screen and (width:800px){
      body{
        background-color: red;
      }
    }
 /* only 更好的兼容 屏幕为800px的时候被选中 */
    @media only screen and (width:800px){
      body{
        background-color: red;
      }
    }

  /* or 代码中体现为 逗号(,)  意思屏幕为800px或者600px的时候被选中 */
    @media screen and (width:800px),screen and (width:600px) {
      body{
        background-color: green;
      }
    }

媒体类型引入方式

style标签里或者css文件中
style标签上
link标签上

<!-- 在style标签里或者在css文件里写媒体查询  -->
  <style>
    @media screen and (width:800px) {
      body {
        background-color: red;
      }
    }
  </style>
    
  <!-- 在style标签上通过属性的方式写媒体查询 -->
  <style media="screen and (width:800px)">
    body {
      background-color: red;
    }
  </style>
  
   <!-- 在link标签上写媒体查询 -->
  <link rel="stylesheet" media="screen and (width:800px)"  href="./base.css">

媒体（media）查询

可以根据不同尺寸的屏幕来加载对应的代码从而实现在不同的屏幕下面显示不同的布局结构

简单示例：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div {
            width: 33.33%;
            border: 1px solid red;
            height: 100px;
            background: skyblue;
            float: left;  
        }

        /* 当屏幕的宽度大于800px,盒子在一行显示，小于800px，在一列显示 */
        /* 使用媒体查询 */
        /* 意思：当屏幕的宽度小于800px的时候，让盒子不要浮动了 */
        @media screen and (max-width: 800px) {
            div {
                width: 100%;
                float: none;
            }
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>
</html>

媒体查询语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
        /* 当屏幕宽度大于800px  yellow */
        /* 屏幕最小的宽度：800px */

        @media screen and (min-width: 800px) {
            body {
                background: yellow;
            }
        }


        /* 当屏幕宽度小于 400px pink */
        /* 屏幕的最大宽度：400px */
        @media screen and (max-width: 400px) {
            body {
                background: pink;
            }
        }



        /* 当屏幕的宽度是：500-600之间， blue */

        @media screen and (min-width: 500px) and (max-width: 600px) {
            body {
                background: blue;
            }
        }

    </style>
</head>
<body>
    
</body>
</html>

bootstrap栅格系统

下载地址：http://v3.bootcss.com/getting-started/#download （用于生产环境的bootstrap）

基本模板

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <!-- 微软  -->
  <!-- 如果 用ie浏览器访问 网站的 优先使用最高内核解析  -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 理想视口的标准写法 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <title>基本模板</title>

  <link rel="stylesheet" href="./lib/css/bootstrap.min.css">


  <!-- 条件注释 -->
  <!-- 
    1 兼容h5语义标签  html5shiv.js 
    2 respond.js  识别媒体查询代码 css3  如果以静态文件的方式打开  没有效果 
   -->
  <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>
  <script src="./lib/js/jquery.1.12.4.js"></script>
  <script src="./lib/js/bootstrap.min.js"></script>
</body>

</html>

栅格系统按照一定规则把 div的的纵向排列改成了类似表格的排列形式

规则：把所有的屏幕( 4种-屏幕宽度) 分为了12份每一列占一份，再进行排列

4种不同宽度的屏幕：