本文主要是介绍移动端布局笔记，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.移动web流式布局

1.移动端基础

兼容移动端主流浏览器，处理Webkit内核浏览器即可。

学会用谷歌浏览器模拟手机界面及调试。

2.视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可分为布局视口、视觉视口和理想视口。

2.1布局视口 layout viewport

• 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
• iOS,Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

不适合！

2.2视觉视口 visual viewport

• 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。
• 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍然保持原来的宽度。

2.3理想视口 ideal viewport

• 为了使网站在移动端有最理想的浏览和阅读宽度而设定
• 理想视口，对设备来讲，是最理想的视口尺寸
• 需要手动添写meta视口标签通知浏览器操作
• meta视口标签的主要目的∶布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

2.4 meta视口标签

<meta name="viewport" content="width=device-width，user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

属性	解释说明
width	宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于O的数字
user-scalable	用户是否可以缩放, yes或no ( 1或0)

3.二倍图

3.1物理像素&物理像素比

• 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了，比如苹果6\7\8 是 750* 1334
• 我们开发时候的1px不是一定等于1个物理像素的
• PC端页面，1个px等于1个物理像素的，但是移动端就不尽相同。PC端与手机端的像素比是1：2；
• 一个px的能显示的物理像素点的个数，称为物理像素比屏幕像素比

3.2 二倍图

1.我们需要一个50*50像素（css像素）的图片 直接放到我们的iphone8 里面会放大2倍 100 *100就会模糊

2.我们采取的是放一个100 *100图片 然后手动的把这个图片 缩小为 50 *50 (css像素)

3.我们准备的图片 比我们实际需要的大小 大2倍，这就方式就是2倍图。

3.3背景缩放 background-size

background-size属性规定背景图像的尺寸

background-size:背景图片宽度 背景图片高度;

• 单位: 长度|百分比|cover | contain;
• cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
• contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

background: ur1(images/dog.jpg)no-repeat;
/* background-size:图片的宽度图片的高度;*/
/* background-size: 500px 200px;*/
/* 1.只写一个参数肯定是宽度高度省略了会等比例缩放*/
/* background-size: 500px;*/
/* 2．里面的单位可以跟% 相对于父盒子来说的*/
/* background-size: 50%;*/
/* 3. cover要完全覆盖div盒子可能有部分背景图片显示不全*/
background-size: cover;
/*4.contain 高度和宽度等比例拉伸  当宽度 或者高度 铺满div盒子就不在进行拉伸了,可能会有部分空白区域*/
background-size: contain;

3.4二倍精灵图做法(重要)

• 在firework里面把精灵图等比例宿放为原来的一半
• 之后根据大小测量坐标
• 注意代码里面background-size也要写∶精灵图原来宽度的一半

4.移动端开发选择

1.单独制作移动端页面（主流）

如：淘宝、京东商城、苏宁易购手机版等

通常情况下，网址域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。

2.响应式页面兼容PC移动端（其次）

如：三星手机官网等

5.移动端技术解决方案

5.1移动端浏览器

移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题。我们可以放心使用H5标签和CSS3样式。

同时我们浏览器的私有前缀我们只需要考虑添加webkit即可

5.2 CSS初始化 normalize.css

移动端CSS初始化推荐使用normalize.css/

• Normalize.css:保护了有价值的默认值
• Normalize.css:修复了浏览器的bug
• Normalize.css:是模块化的
• Normalize.css:拥有详细的文档

官网地址: http://necolas.github.io/normalize.css/

5.3 CSS3 盒子模型 box-sizing

• 传统模式宽度计算: 盒子的宽度=CSS中设置的width + border + padding
• CSS3盒子模型: 盒子的宽度=CSS中设置的宽度width里面包含了border和padding也就是说，我们的CSS3中的盒子模型，padding和border不会撑大盒子了

/*css3盒子模型* /
box-sizing : border-box ;
/*传统盒子模型*/
box-sizing : content-box;

传统or CSS3盒子模型?

• 移动端可以全部CSS3盒子模型
• PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择CSS3盒子模型

5.4 特殊样式

/ *css3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除清除设置为transparent完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式*/-webkit-appearance: none;
/*禁用长按页面时的弹出菜单* /
img,a { -webkit-touch-callout: none; }

6.移动端常见布局(重要)

6.1移动端技术选型

移动端布局和以前我们学习的PC端有所区别:

1.单独制作移动端页面（主流) 方式：

• 流式布局（百分比布局）
• flex弹性布局（强烈推荐)
• less+rem+媒体查询布局
• 混合布局

2==.响应式==页面兼容移动端（其次) 方式：

• 媒体查询

• bootstarp

6.2流式布局(百分比布局)

• 流式布局，就是百分比布局，也称非固定像素布局。
• 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
• 流式布局方式是移动web开发使用的比较常见的布局方式。

为了合理显示内容：规定了两个参数

• max-width: 最大宽度（ max-height最大高度)
• min-width: 最小宽度（ min-height最小高度)

案例：京东移动端首页

分析：1.技术选型

​ 方案：我们采用单独制作移动页面方案

​ 技术：布局采取流式布局

​ 2.搭建项目

​ CSS文件夹、images文件夹、upload产品文件夹、index.html

​ 3.设置视口标签以及引入初始化样式

<meta name="viewport" content="width=device-width,initial-scale=1.0,
user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<!-- 引入CSS初始化文件 -->
    <link rel="stylesheet" href="../css/normalize.css">
    <!-- 引入首页的CSS文件 -->
    <link rel="stylesheet" href="../css/index.css">

​ 4.常用初始化样式

body{
    margin: 0 auto;
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;
}

盒子外边距塌陷使用：overflow：hidden；

使用了position：fixed；固定定位，需要给盒子宽度；还需设置min-width和max-width;

6.3flex布局

6…3.1传统布局与flex布局

传统布局：

• 兼容性好
• 布局繁琐
• 局限性，不能在移动端很好的布局

flex弹性布局：

• 操作方便，布局极为简单，移动端应用很广泛
• PC端浏览器支持情况较差
• IE11或更低版本，不支持或仅部分支持

建议︰

1.如果是PC端页面布局，我们还是传统布局。
2.如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局

6.3.2布局原理

flex是flexible Box的缩写，意为"弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

• 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用Flex布局的元素，称为Flex容器( flex container )，简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目( flex item )，简称"项目"。

• 体验中div就是flex父容器。
• 体验中span就是子容器flex项目
• 子容器可以横向排列也可以纵向排列

总结flex布局原理∶

就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

6.3.3常见父项属性

以下由6个属性是对父元素设置的

• flex-direction :设置主轴的方向
• justify-content :设置主轴上的子元素排列方式
• flex-wrap:设置子元素是否换行
• align-content :设置侧轴上的子元素的排列方式(多行)
• align-items :设置侧轴上的子元素排列方式(单行)
• flex-flow :复合属性,相当于同时设置了flex-direction和flex-wrap

①. flex-direction设置主轴的方向★

1.主轴与侧轴
在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有:行和列、x轴和y轴

• 默认主轴方向就是x轴方向，水平向右
• 默认侧轴方向就是y轴方向，水平向下

2.属性值

flex-direction属性决定主轴的方向(即项目的排列方向)
注意∶主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

属性值	说明
row	默认值从左到右
row-reverse	从右到左
colum	从上到下
column-reverse	从下到上

②.justify-content设置主轴上的子元素排列方式★

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qcjKHGU1-1638114655460)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20211122232944509.png)]

<style>
      div {
        /* 给父级添加flex属性 */
        display: flex;
        width: 800px;
        height: 600px;
        background-color: pink;
        /* 默认值 从头部开始 ，默认主轴是X轴，则从左到右 */
        /* justify-content: flex-start; */
        /* 子元素从尾部开始排列 */
        /* justify-content: flex-end; */
        /* 子元素居中排列 */
        /* justify-content: center; */
        /* 平分剩余空间 */
        /* justify-content: space-around; */
        /* 子元素先两边贴边，再平分剩余空间 */
        /* justify-content: space-between; */

        /* 主轴为Y轴 */
        flex-direction: column;
         /* 子元素先两边贴边，再平分剩余空间 */
        /* justify-content: space-between; */
         /* 平分剩余空间 */
        /* justify-content: space-around; */
        /* 子元素居中排列 */
        justify-content: center;

      }
      div span {
        width: 150px;
        height: 100px;
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <!-- <span>4</span> -->
    </div>
  </body>

③. flex-wrap 设置子元素是否换行★

默认情况下，项目（子元素）都排在一条线（又称“轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。

属性值	说明
nowrap	默认值，不换行
wrap	换行

④. align-items 设置侧轴上的子元素排列方式(单行) ★

该属性控制子项在侧轴(默认是y轴) 上的排列方式 在子项为单项的时候使用

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸（默认值）

<style>
      div {
        display: flex;
        width: 800px;
        height: 400px;
        background-color: pink;
        /* 默认的主轴是X轴row */
        justify-content: center;
        /* 我们需要一个侧轴居中 */
        align-items: center;
      }
      div span {
        width: 150px;
        height: 100px;
        background-color: purple;
        color: #fff;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="div">
      <span>1</span>
      <span>1</span>
      <span>1</span>
      <span>1</span>
    </div>
  </body>

⑤. align-content 设置侧轴上的子元素的排列方式（多行）

设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

⑥. align-content和align-items区别

• align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸
• align-content适应于换行(多行)的情况下(单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
• 总结 就是单行找align-items 多行找align-content

⑦. flex-flow

flex-flow 属性是 flex-direction 和flex-wrap 属性的复合属性

<style>
      div {
        display: flex;
        width: 600px;
        height: 300px;
        background-color: pink;
        /* 主轴设置为Y轴 */
        /* flex-direction: column; */
        /* 自动换行 */
        /* flex-wrap: wrap; */
        
        /* 简写：把设置主轴方向和是否换行（换列） */
        flex-flow: column wrap;
      }
      div span {
        width: 150px;
        height: 100px;
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
    </div>
  </body>

6.3.4 flex布局子项常见属性

• flex子项目占的份数
• align-self控制子项目自己在侧轴的排列方式
• order属性定义子项目的排列顺序（前后顺序）

① flex 属性 ★

flex属性定义子项目分配剩余空间，用flex来表示占多少份数。

格式：

项目名{
   flex：<number>;  /*默认为0 ，number数值越大，分配的份数越多*/
}

<head>
   <style>
  p {
        display: flex;
        width: 60%;
        height: 150px;
        background-color: pink;
        margin: 100px auto;
      }
      p span {
        flex: 1;
      }
    </style>
  </head>

<body>
    <p>
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </p>
  </body>

② align-self 控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

单独给某个项目设置排列方式：

span:nth-child(2){
     /*设置自己在侧轴上的排列方式*/
     align-self:flex-end;  
}

③ order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为0.

注意：和z-index不一样。

案例：携程网移动端首页

1.技术选型

​ 方案：我们采取单独制作移动页面方案

​ 技术：布局采取flex布局

背景线性渐变

语法1:

background: linear-gradient (起始方向，颜色1，颜色2，… ) ;

background: -webkit-linear-gradient (left,red , blue);

background: -webkit-linear-gradient (left top,red , blue) ;

背景渐变必须添加浏览器私有前缀：-webkit
起始方向可以是:方位名词或者度数，如果省略默认就是top

6.4移动web开发之rem适配布局

6.4.1 rem 基础

rem 单位

rem (root em)是一个相对单位，类似于em , em是父元素字体大小。

不同的是rem的基准是相对于html元素的字体大小。

比如，根元素 ( html ） 设置font-size=12px;,非根元素设置width:2rem;则换成px表示就是24px.。

<style>
      html {
        font-size: 14px;
      }
      div {
        font-size: 12px;
      }
      div p {
        /* 1.em相对于父元素 的字体大小来说的 */
        width: 10em;
        height: 10em;
        background-color: #ccc;
      }
      span {
        display: block;
        /* 结果：宽为140px,高为140px */
         /* 2. rem相对于html元素 字体大小来说的 */
        width: 10rem; 
        height: 10rem;
        background-color: pink;
        /* 3. rem的优点就是可以通过修改html里面的文字大小来改变页面元素中的大小可以整体控制 */
      }
    </style>
  </head>
  <body>
    <div>
      <p></p>
      <span></span>
    </div>
  </body>

6.4.2 媒体查询

什么是媒体查询？

媒体查询(Media Query )是CSS3新语法。

• 使用@media查询，可以针对不同的媒体类型定义不同的样式
• @media可以针对不同的屏幕尺寸设置不同的样式
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
• 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

媒体查询最好的方法是从小到大。

语法规范

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

• 用@media开头 注意@符号
• mediatype 媒体类型
• 关键字 and not only
• media feature媒体特性必须有小括号包含

1.mediatype查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等

2.关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

• and :可以将多个媒体特性连接到一起，相当于“且”的意思。
• not:排除某个媒体类型，相当于“非”的意思，可以省略。
• only:指定某个特定的媒体类型，可以省略。

3.媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。注意他们要加小括号包含；

值	解释说明
width	定义输出设备中页面可见区域的宽度
min-width	定义输出设备中页面最小可见区域宽度
max-widh	定义输出设备中页面最大可见区域宽度

<style>
      /* 意思是：在我们屏幕上  并且  最大的宽度是 800像素 设置我们想要的样式 */
      /* max-width 小于等于800 */
      @media screen and (max-width: 800px) {
        body {
        /* 当屏幕宽度小于800时，背景颜色为粉色。 */
          background-color: pink;
        }
      }
    </style>
  </head>
  <body></body>

引入资源 (理解）

6.5 Less 基础

维护 CSS 的弊端

CSS是一门非程序式语言，没有变量、函数、 SCOPE( 作用域）等概念。

• CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的。
• 不方便维护及扩展，不利于复用。
• CSS没有很好的计算能力
• 非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。

Less介绍

Less ( Leaner Style Sheets 的缩写）是一门CSS扩展语言，也成为CSS预处理器。

做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。

它在CSS的语法基础之上，引入了变量，Mixin (混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

Less中文网址: http://lesscss.cn/

常见的CSS预处理器: Sass、Less、Stylus

一句话：Less是一门CSS预处理语言，它扩展了CSS的动态特性。

Less使用

我们首先新建一个后缀名为less的文件，在这个less文件里面书写less语句。

• Less变量
• Less编译
• Less嵌套
• Less运算

①Less变量

变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

语法： @变量名: 值;

1.变量命名规范

• 必须有@为前缀
• 不能包含特殊字符
• 不能以数字开头
• 大小写敏感

②less编译

通过VSCode下载 easy less 插件，安装好后，保存.less文件，就会自动生成一个编译好的.css文件，然后在html文件中引入这个.css文件，就可以使用它的样式啦。

③less嵌套

1.less嵌套 子元素的样式直接写到父元素里面就好了

2.如果有伪类、交集选择器、伪元素选择器 ，我们内层选择器的前面需要加 &

没有&符号，则它被解析为父选择器的后代。

④less运算 ★

任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算数运算。

注意∶

• 乘号(*)和除号(/)的写法
• 运算符中间左右有个空格隔开1px + 5
• 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
• 如果两个值之间只有一个值有单位，则运算结果就取该单位

进入4.0版本后， 除法运算符如果在括号外面，不执行除法运算， 如果在小括号内可以看做是除法运算

所以解决办法就是：

• 除法运算加（）

@boder:5px;
div{
    width: (82/50)rem;
    height: (82/50)rem;
    border: @boder solid pink;
    
}

6.6rem适配方案

为什么使用rem适配方案？

1.让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。

2.使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化,元素尺寸也会发生变化，从而达到等比缩放的适配。

rem实际开发适配方案

①按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小;（媒体查询)

②CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值;

rem 实际开发适配方案1

rem + 媒体查询 + less技术

1.设计稿常见尺寸宽度

设备	常见宽度
iphone 4.5	640px
iphone 678	750px
Android	常见320px、360px、375px、384px、400px、414px、500px、720px 大部分4.7~5寸的安卓设备为720px

2.动态设置html标签font-size大小
①假设设计稿是750px

②假设我们把整个屏幕划分为15等份(划分标准不一可以是20份也可以是10等份)

③每一份作为html字体大小，这里就是50px

④那么在320px设备的时候，字体大小为320/15就是21.33px

⑤用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的

⑥比如我们以750为标准设计稿

⑦一个100*100像素的页面元素在750屏幕下，就是100/50转换为rem是2rem * 2 rem 比例是1比1

⑧320屏幕下，html字体大小为21.33则2rem = 42.66px此时宽和高都是42.66

⑨但是宽和高的比例还是1比1但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果

3.元素大小取值方法

①最后的公式∶页面元素的rem值=页面元素值( px ) /（屏幕宽度 / 划分的份数)

②屏幕宽度/划分的份数就是html font-size的大小

③或者: 页面元素的rem值= 页面元素值( px ) / html font-size字体大小

案例 苏宁网移动端首页

1.技术选型

方案 1:

我们采取单独制作移动页面方案

技术︰布局采取rem适配布局(less + rem +媒体查询)

设计图: 本设计图采府750px设计尺寸

.less文件直接导入用： @import “文件名”;

方案 2：（推荐）

• flexible.js
• rem

简洁高效的rem适配方案2 flexible.js

手机淘宝团队出的简洁高效移动端适配库

我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理

它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。我们要做的，就是确定好我们当前设备的html文字大小就可以了

比如当前设计稿是750px，那么我们只需要把html文字大小设置为75px(750px/10)就可以里面页面元素rem值: 页面元素的px值 / 75

剩余的，让flexible.js来去算

github地址: https://github.com/amfe/lib-flexible

VSCode中 px 转换 rem 的插件 cssrem

swiper插件

swiper插件使用制作轮播图
官网地址: https://www.swiper.com.cn/
-下载需要的css和is文件
·官网找到类似案例，复制html结构，css样式s 语法·根据需求定制修改模块

6.7移动web开发之响应式布局

6.7.1响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

设备划分	尺寸区间
超小屏幕（手机）	<768px
小屏设备(平板)	>=768px~<992px
中等屏幕（桌面显示器)	> = 992px ~ <1200px
宽屏设备(大桌面显示器)	>= 1200px

6.7.2响应式布局容器

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布词和样式变化。

平时我们的响应式尺寸划分

• 超小屏幕(手机，小于768px)︰设置宽度为100%
• 小屏幕（平板，大于等于768px )︰设置宽度为750px
• 中等屏幕（桌面显示器，大于等于992px ):宽度设置为970px
• 大屏幕(大桌面显示器，大于等于1200px) ︰宽度设置为1170px

<style>
      .container {
        height: 150px;
        background-color: pink;
        margin: 0 auto;
      }
      /* 1.超小屏幕下  小于768 布局容器 */
      @media screen and (max-width: 767px) {
        .container {
          width: 100%;
        }
      }
      /* 2.小屏幕下  大于等于768 布局容器改为750px  */
      @media screen and (min-width: 768px) {
        .container {
          width: 750px;
        }
      }
      /* 3.中等屏幕下  大于等于992 布局容器改为970px  */
      @media screen and (min-width: 992px) {
        .container {
          width: 970px;
        }
      }
      /* 4.大屏幕下  大于等于1200 布局容器改为1170px  */
      @media screen and (min-width: 1200px) {
        .container {
          width: 1170px;
        }
      }
    </style>
  </head>
  <body>
    <!-- 响应式布局里面，首先需要一个布局容器 -->
    <div class="container"></div>
  </body>

7. Bootstrap前端开发框架

7.1 Bootstrap 简介

Bootstrap来自Twitter (推特），是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。

• 中文官网: http://www.bootcss.com
• 官网: http://getbootstrap.com
• 推荐使用:http://bootstrap.css88.com

框架∶顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

1.优点

• 标准化的html+css编码规范
• 提供了一套简洁、直观、强悍的组件
• 有自己的生态圈，不断的更新迭代
• 让开发更简单，提高了开发的效率

7.2bootstrap的使用

2.创建html骨架结构、3.引入相关样式文件、4.书写内容

<!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>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
  </head>
  <body>
    123
  </body>
</html>

4.书写内容

• 直接拿Bootstrap预先定义好的样式来使用
• 修改Bootstrap原来的样式，注意权重问题
• 学好Bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果

7.3布局容器

Bootstrap需要为页面内容和棚格系统包裹一个==.container容器，Bootstarp预先定义好了这个类==，叫.container它提供了两个作此用处的类。

1. container类

• 响应式布局的容器固定宽度
• 大屏( >=1200px)宽度定为1170px
• 中屏( >=992px)宽度定为970px
• 小屏( >=768px)宽度定为750px
• 超小屏(100%)

2.container-fluid类

• 流式布局容器百分百宽度
• 占据全部视口( viewport)的容器。
• 适合于单独做移动端开发

3.栅格系统简介

栅格系统英文为“gridsystems”,也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口( viewport )尺寸的增加，系统会自动分为最多12列。

Bootstrap里面container宽度是固定的，但是不同屏幕下，container的宽度不同，我们再把container划分为12等份。

3.2 栅格选项参数

栅格系统用于通过一系列的行( row )与列( column )的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

	超小屏幕(手机) <768px	小屏设备(平板) >=768px	中等屏幕(桌面显示器） > =992px	宽屏设备(大桌面显示器) > =1200px
.container最大宽度	自动(100%)	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列( column )数	12	12	12	12

• 行( row) 必须放到container布局容器里面
• 我们实现列的平均划分需要给列添加类前缀
• xs-extra small :超小; sm-small : 小; md-medium :中等; lg-large :大;
• 列( column )大于12，多余的 “列 ( column )” 所在的元素将被作为一个整体另起一行排列
• 每一列默认有左右15像素的padding
• 可以同时为一列指定多个设备的类名，以便划分不同份数例如class=“col-md-4 col-sm-6”

<style>
      .container .row:nth-child(1) {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <!-- 栅格系统的使用 -->
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
      </div>
    </div>
  </body>

3.3列嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列 .col-sm- * 元素到已经存在的 .col-sm-* 元素内。

 <style>
      .container .row:nth-child(1) {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <!-- 栅格系统的使用 -->
    <div class="container">
      <div class="row">
       
        <div class="col-md-4">
          <!-- 我们列嵌套最好加一个行row，这样可以去掉父元素的padding值  
                  而且高度自动和父级一样高 -->
          <div class="row">
            <div class="col-md-6">a</div>
            <div class="col-md-6">b</div>
          </div>
        </div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
      </div>
    </div>
  </body>

3.4列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用选择器为当前元素增加了左侧的边距( margin ) 。

<style>
.row div {
height: 50px;
background-color: pink;
}
  </style>
</ head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-4">左侧</div>
      
      /*向右侧偏移4份   偏移份数就是12减去两个盒子的份数*/
    <div class="col-md-4 col-md-offset-4">右侧</div>
  </div>
</div>
</body>

3.5列排序

通过使用 .col-md-push- 和 .col-md-pull- 类就可以很容易的改变列( column )的顺序。

3.6响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

与之相反的，是visible-xs visible-sm visible-md visible-lg是显示某个页面内容

Bootstrap 其他（按钮、表单、表格）请参考Bootstrap 文档。

这篇关于移动端布局笔记的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！