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

目录

1.视口

1.1.理想视口

 1.2.标准理想视口

 1.3.标准理想视口的含义

2.pc端布局

3.移动端 

3.1.rem+flexible

 3.2.vw屏幕适配

3.3.响应式适配

4.rpx小程序适配

---

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种不同宽度的屏幕：

• 极小屏幕 xs 小于等于768px 手机设备

• 小屏幕 sm 768px ~992px 平板电脑

• 中等(普通)屏幕 md 992px~1200px - 老旧的电脑显示器

• 大屏 lg 大于1200px 大的电脑显示器

编写栅格系统大致步骤：

• 版心容器 .container或者 .container-fluid

• 行 .row

• 栅格代码 col-(屏幕种类)-份数 如 col-xs-11

4.rpx小程序适配

 rpx（responsive pixel）：可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx