响应式

一、响应式布局介绍

1. 响应式布局是什么？

   1. 实现不同屏幕分辨率的终端上浏览网页的不同展示方式。

2. 常见布局方式

   1）流式布局（响应式布局）

   1.1）pc和移动端共用一套页面；

   1.2）优点：只需要写一套代码，就能在多端运行

   1.3）缺点：维护困难

   1.4）适合创业或者建站公司

   2）rem布局（自适应布局）

   2.1）H5页面（比如：微信页面）、移动端

   2.2）优点：维护容易

   2.3）缺点：需要额外写其他端的代码

   2.4）适合开发自己公司的网站

3. 响应式布局怎么实现？

   1）设置meta标签

   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <!--以下是标签上字段的解释-->
   viewport 视图width=device-width 可视区域的宽度为设备的宽度，
   如果不设置的话，默认视口宽度为980pxinital-scale=1 
   页面首次被显示的可视区域的缩放级别，取值1.0则页面按实际尺寸显示，
   无任何缩放maximum-scale=1 用户可将页面放大的程序。
   1.0将禁止用户放大到实际尺寸之上user-scalable=no 禁止用户缩放操作
   

   2）媒体查询

   2.1）概念：根据条件告诉浏览器如何为指定视图宽度渲染页面

   2.2）设置单个视图宽度

   @media screen and (max-width: 980px) {    div {      样式属性    }}
   

   2.3）设置多个视图宽度

   /** iPad **/
   @media only screen and (min-width: 768px) and (max-width: 1024px) {}
   
   @media only screen and (min-width: 320px) and (max-width: 767px) {}
   

   2.4) 设置link标签

   <link rel="stylesheet" type="text/css" href="css/index-sm.css" media="screen and (min-width:320px) and (max-width:767px)"/>
   
   <link rel="stylesheet" type="text/css" href="css/index-md.css" media="screen and (min-width:768px) and (max-width:1024px)"/>
   
   <link rel="stylesheet" type="text/css" href="css/index-lg.css" media="screen and (min-width:1025px)"/>
   

   1. 注意事项

   3.1）宽度需要使用百分比

   #head { width: 100% }#content { width: 50%; }
   

   3.2）其余的样式，如字体，高度，margin，padding等都按照设计稿标注尺寸的一半来设置

   3.3）物理像素和设计稿像素比例是1：2

   3.4）对于有些屏幕尺寸下，我们设置的固定值看起来不是特别好看的话，使用@media进行微调

   3.5）处理图片缩放，给图片指定的最大宽度为百分比。假如图片超过了，则自动缩小调整。假如图片小了，则原尺寸输出

   img { width: auto; max-width: 100%; }
   

二、常见手机屏幕尺寸

1. 苹果手机（ios）

   1）5s以下都是320px宽度、6是375px宽度、6plus是414px宽度

2. 安卓手机（android）

   1）320、360、480、540、640、720

3. 设计稿

   1）640×1136 、640*×960 、750×1334

三、响应式框架

1. bootstrap

2. iview

   1）一套微信小程序的ui组件库

3. elements

4. lay-ui

四、bootstrap介绍

1. bootstrap是什么？

   1）bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。

   1. 主要用于做响应式开发、移动端开发

2. 安装

   1）下载压缩包

   2）通过cdn下载css、js、jq（https://blog.csdn.net/qq_35077107/article/details/105588524）

   2.1) CDN就是内容传递网络，Content Delivery Network的缩写就是 CDN，简单的说就是Bootstrap把自己的css、Js等文件托管到某一个网络服务器上使用时调用。如果与Internet不通则无法使用CDN加速，可将文件下载到本地引用

3. 如何使用？

   1）引入基本样式、js、jq

   1.1）bootstrap的所有js效果都依赖jq，所以必须要加载jq

   2）在标题上添加meta标签

   <meta name="viewport" content="width=device-width, initial-scale=1">或者<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   

4. 布局容器

   1）.container : 用于固定宽度并支持响应式布局的容器

   1. .container-fluid : 用于100%宽度，占据全部视口（viewport）的容器

   3）bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。

   注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

5. 栅格系统

   1）随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

   <div class="container-fluid">    
   	<div class="row">        
   	<div class="col-md-3 col-sm-4">1</div>        
   	<div class="col-md-3 col-sm-4">2</div>        
   	<div class="col-md-3 col-sm-4">3</div>        
   	<div class="col-md-3 col-sm-4">4</div>        
   	<div class="col-md-3 col-sm-4">5</div>        
   	<div class="col-md-3 col-sm-4">6</div>        
   	<div class="col-md-3 col-sm-4">7</div>        
   	<div class="col-md-3 col-sm-4">8</div>        
   	<div class="col-md-3 col-sm-4">9</div>        
   	<div class="col-md-3 col-sm-4">10</div>        
   	<div class="col-md-3 col-sm-4">11</div>        
   	<div class="col-md-3 col-sm-4">12</div>
   </div></div>
   

6. 类前缀

   1）.col-xs-

   1.1) 超小屏幕、手机、<786px

   2）.col-sm-

   2.1) 小屏幕 、平板、≥768px

   3）.col-md-

   3.1) 中等屏幕、桌面显示器、≥992px

   4）.col-lg-

   4.1) 大屏幕、大桌面显示器、≥1200px

7. 全局css样式

   1. 概念：直接添加标签或者class即可生效使用

   2）辅助类

   2.1）快速浮动

   pull-left(左浮动)pull-right(右浮动)
   

   注意：不能用于导航条组件中

   导航条应该用.navbar-left 或 .navbar-right
   

   2.2) 让内容块居中

   .center-block(居中)
   

   2.3）清除浮动

   .clearfix(加在父元素上可清除浮动)
   

   2.4）显示或隐藏内容

   .show(显示内容).hidden(隐藏内容)
   

8. 组件

   1）字体图标

   1.1）添加一个空的span标签，并加上class，不要与其他class混用

   2）导航栏(.nav)

   2.1）外层必须为nav标签

   <div class="navbar navbar-default">         
   	<div class="container clearfix">             
   	<div class="navbar-header navbar-left">                 
   		<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#xxxxx">                     
   			<span class="icon-bar"></span>                     
   			<span class="icon-bar"></span>                     
   			<span class="icon-bar"></span>                 
   		</button>                 
   		<a class="navbar-brand" href="#">tokyoHot</a>             
   	</div>             
   		<div class="collapse navbar-collapse navbar-right" id="xxxxx">                 
   			<ul class="nav navbar-nav">                     
   				<li>首页</li>                     
   				<li>新闻中心</li>                     
   				<li>详情页</li>                 
   			</ul>             
   		</div>         
   	</div>     
   </div>
   

   3）data-toggle

   3.1）用于告诉 JavaScript 需要对按钮做什么

   4）data-target

   4.1）指示要切换到哪一个元素