响应式布局(flex/rem/bootstrap...)

前提知识

特殊样式

/*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; }

移动端技术解决方案

1.移动端浏览器
移动端浏览器基本以webkit内核为主,因此我们就考虑webkit兼容性问题。
我们可以放心使用H5标签和CSS3样式。
同时我们浏临器的私有前缀我们只需要考虑添加webkit即可
2.移动端css初始化
移动端CSS初始化推荐使用 normalize.css/
●Normalize.css :保护了有价值的默认值
●Normalize.css :修复了浏览器的bug
●Normalize.css :是模块化的
●Normalize.css :拥有详细的文档
官网地址: http://necolas.github.io/normalize.css/
3.CSS3盒子模型box-sizing
●传统模式宽度计算 :盒子的宽度= CSS中设置的width + border + padding
●CSS3盒子模型:盒子的宽度 = CSS中设置的宽度width里面包含了border和padding也就是说,我们的CSS3中的盒子模型， padding 和border不会撑大盒子了
移动端可以全部CSS3盒子模型
PC端如果完全需要兼容,我们就用传统模式,如果不考虑兼容性,我们就选择CSS3子模型

移动端开发选择

1.单独制作移动端页面(主流)
通常情况下,网址域名前面加m(mobile)可以打开移动端。通过判断设备,如果是移动设备打开,则跳到移动端页面
1.流式布局(百分比布局)
2.flex弹性布局(强烈推荐)
3.less+rem+媒体查询布局
4.混合布局
2.响应式页面兼容移动端(其次)
通过判断屏幕宽度来改变样式,缺点:制作麻烦,需要花很大的经历去调兼容性问题
1/媒体查询
2/bootstrap

meta视口标签

标准的viewport设置

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

流式布局

流式布局,就是百分比布局,也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。
防止无限伸缩,挤掉其他元素
max-width最大宽度( max-height最大高度)
min-width最小宽度 (min-height最小高度)一般320px

Flex

flex体验

1.flex弹性布局
操作方便,布局极为简单,移动端应用很广泛
PC端浏览器支持情况较差
IE 11或更低版本,不支持或仅部分支持
建议:
1.如果是PC端页面布局,我们还是传统布局。
2.如果是移动端或者不考虑兼容性问题的PC端页面布局, 我们还是使用flex弹性布局

flex原理

flex是flexible Box的缩写,意为"弹性布局" ,来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。
当我们为父盒子设为flex布局以后,子元素的float、clear 和vertical-align(元素垂直对齐的方式)属性将失效。
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用Flex布局的元素,称为Flex容器( flex container) , 简称”容器"。它的所有子元素自动成为容器成员,称为Flex项目( flex item) ,简称"项目"。
总结flex布局原理:
就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式

flex布局父项常见属性

常见父项属性
以下由6个属性是对元素设置的
flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap∶设置子元素是否换行
align-content :设置侧轴上的子元素的排列方式(多行)
align-items :设置侧轴上的子元素排列方式(单行)
flex-flow :复合属性，相当于同时设置了flex-direction和flex-wrap

flex主轴的子元素排列justify-content

justify-content属性定义了项目在主轴上的对齐方式
注意:使用这个属性之前一定要确定好主轴是哪个
属性值 说明
flex-start 默认值从头部开始如果主轴是x轴，则从左到右
flex-end 从尾部开始排列顺序不变(了解)
center 在主轴居中对齐(如果主轴是x轴则水平居中)
space-around 平分剩余空间
space-between 先两边贴边再平分剩余空间(重要)

flex-wrap子元素是否换行

默认情况下，项目都排在一条线(又称”轴线”)上。flex-wrap属性定义，flex布局中默认是不换行的。
nowarp 默认值,不换行

flex主轴flex-direction

1.主轴与侧轴
在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有∶行和列、x轴和y轴
默认主轴方向就是x轴方向，水平向右
默认侧轴方向就是y轴方向，水平向下
2.属性值
flex-direction属性决定主轴的方向(即项目的排列方向)
注意︰主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
row(x轴) 默认值从左到右
row-reverse 从右到左(了解)顺序翻转
column(y轴) 从上到下
column-reverse 从下到上(了解)

align-items侧轴上的子元素排列方式(单行)

该属性是控制子项在侧轴（默认是y轴)上的排列方式在子项为单项的时候使用
属性值 说明
flex-start 从上到下
flex-end 从下到上
center 挤在一起居中（垂直居中)
stretch 拉伸（默认值)不给高度才有效果

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属性的复合属性

div{
    display: flex;
    width: 600px;
    height: 300px;
    background-color: pink;
    /* flex-direction: column;
    flex-wrap: wrap; */
    flex-flow: column wrap;
}

flex子项flex份数

p span{
    /* 平均分配宽高 */
    flex: 1;
    background-color: yellow;
}
p span:nth-child(2){
    /* 占两份 */
    flex: 2;
    background-color: green;
}

flex布局子项常见属性

flex子项目占的份数:
flex属性定义子项目分配剩余空间，用flex来表示占多少份数。
align-self控制子项自己在侧轴的排列方式:
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性,如果没有父元素，则等同于stretch,。
order属性定义子项的排列顺序(前后顺序):
数值越小,排列越靠前,默认为0

align-self和order

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

div span:nth-child(2){
    /* 数值越小,排列越靠前,默认为0 */
    order: -1;
}
div span:nth-child(3){
    align-self: flex-end;
}

线性渐变背景颜色

background: linear-gradient(起始方向，颜色1，颜色2,...);
background: -webkit-linear-gradient(left, red , blue);
background: -webkit-linear-gradient (left top,red,blue);
背景渐变必须添加浏览器私有前缀
起始方向可以是︰方位名词或者度数，如果省略默认就是top

Rem

技术方案

技术方案1 技术方案2(推荐)

less flexible.js

媒体查询 rem

rem

根据页面宽度改变颜色

/*  min-width >=   max-width  <= */
/* 注意:为了防止混乱,媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到
/* 1.小于540px页面  说明最大时539px */
@media screen and (max-width: 539px) {
    body {
        background-color: blue;
    }
}
/* 2.540px~970px  的页面 */
/* @media screen and (min-width: 540px) and (max-width: 969px) {
    body {
        background-color: pink;
    }
} */
@media screen and (min-width: 540px){
    body {
        background-color: pink;
    }
}
/* 大于970 */
@media screen and (min-width: 970px) {
    body {
        background-color: red;
    }
}

// <539px 蓝色  >540px 粉色  >970px红色

媒体查询

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

使用@media查询，可以针对不同的媒体类型定义不同的样式

@media可以针对不同的屏幕尺寸设置不同的样式

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

@media mediatype and|not|only (media feature){

}

用@media开头注意@符号

mediatype媒体类型:

all(用于所有设备),print(用于打印机和打印预览),screen(用于电脑屏幕,平板电脑,智能手机等)

关键字and not only

and :可以将多个媒体特性连接到一起,相当于“且”的意思。

not :排除某个媒体类型,相当于”非” 的意思,可以省略。

only :指定某个特定的媒体类型,可以省略。

media feature媒体特性必须有小括号包含

width 定义输出设备中页面可见区域的宽度

min-width 定义输出设备中页面最小可见区域宽度

max-width 定义输出设备中页面最大可见区域宽度

rem单位

p{
    /* 1.em 相对于父元素 的字体大小来说的 */
    /* width: 10em;
    height: 10em; */
    /* 2.rem 相对于html元素字体大小来说的 */
    width: 10rem;
    height: 10rem;
    background-color: pink;
    /* 3.rem就是可以通过修改html里面文字大小来改变页面元素的大小可以整体控制 */
}

媒体查询+rem

/* 从小到大顺序 */
@media screen and (min-width:320px) {
    html {
        font-size: 50px;
    }
}
/* 1rem = 50px */
@media screen and (min-width:640px) {
    html {
        font-size: 100px;
    }
    /* 1rem = 100px */
}

引入资源

<!-- 引入资源就是针对不同的屏幕尺寸 调用不同的css文件 -->
    <link rel="stylesheet" href="./style320.css" media="screen and (min-width:320px)">
    <link rel="stylesheet" href="./style640.css" media="screen and (max-width:640px)">
        
 <!-- 
        当样式比较繁多的时候,我们可以针对不同的媒体使用不同stylesheets (样式表)。
        原理,就是直接在link中判断设备的尺寸,然后引用不同的css文件。
     -->

flexible

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

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

它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。

我们要做的,就是确定好我们当前设备的html文字大就可以了

比如当前设计稿是750px，那么我们只需要把html文字大小设置为75px(750px/ 10)就可以

里面页面元素rem值:页面元素的px值/ 75

剩余的,让flexible.js来去算

less

less变量

​ @变量名:值;
​ 1.变量命名规范
​ 必须有@为前缀
​ 不能包含特殊字符
​ 不能以数字开头
​ 大小写敏感

//定义一个粉色的变量
@color:pink;
//错误变量命名 不能包含特殊字符 不能以数字开头  大小写敏感
//定义了一个字体为14px的变量
@font14:14px;
body{
    background-color: @color;
}
div{
    color: @color;
    font-size: @font14;
}
a{
    font-size: @font14;
}

less编译

本质上, Less包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,
这些规则最终会通过解析器,编译生成对应的CSS文件。
所以,我们需要把我们的less文件,编译生成为css文件,这样我们的html页面才能使用。

less嵌套

子元素的样式直接写到父元素里面
如果遇见(交集|伪类|伪元素选择器)
●内层选择器的前面没有&符号,则它被解析为父选择器的后代;
●如果有&符号,它就被解析为元素自身或父元素的伪类。

.header{
    width: 200px;
    height: 200px;
    background-color: pink;
    //1.less嵌套 子元素的样式直接写到父元素里面
    a{
        color: red;
        //如果有伪类、交集、伪元素选择器, 我们内层选择器的前面需要加&
        &:hover{
            color: blue;
        }
    }
}
.nav{
    width: 200px;
    height: 200px;
    background-color: blue;
    .logo{
        color:green;
    }
    &::before{
        content: 'hahahahaha';
    }
}

less运算

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

@border:5px + 5;
@basefont:50px;
div{
    width: 200px - 50;
    height: 200px * 2;
    border: @border solid red;
    background-color: #666 - #222;
}
img {
    width: 82rem / @basefont;
    height: 82rem / @basefont;
}
// 乘号(*)和除号(/ )的写法
// 运算符中间左右有个空格隔开1px + 5
// 如果两个数都有单位,运算结果的值取第一个值的单位
// 如果两个值之间只有一个值有单位,则运算结果就取该单位

rem适配方案

1.设计稿常见的尺寸宽度

iphone 4.5      640px
iphone 6/7/8    750px
Android         常见320px、360px、 375px、 384px、 400px、 414px、 500px、 720px大部分4.7~5寸的安卓设备为720px
基本以750px为准

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字体大小

屏幕划分

小于768px 超小屏幕

大于768px 小屏幕

大于992px 中等屏幕

大于1200px 大屏幕

Bootstrap

引入

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
  integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" 
crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
  integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" 
crossorigin="anonymous">

<!-- 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]-->

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0
+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
  integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
  crossorigin="anonymous">
</script>

响应式布局原理

<!-- 响应式开发里面 , 首先需要一个布局容器 -->
// Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstarp预先定义好了这个类，叫.container它提供了两个作此用处的类。   
<div class="container"></div>

/* 从小写到大 */
/* 1.超小屏幕下 小于768px 布局容器的宽度为100% */
@media screen and (max-width: 767px) {
    .container{
        /* 跟手机一样大 */
        width: 100%;
    }
}
/* 2.小屏幕下  大于768px 布局容器的宽度为750px */
@media screen and (min-width: 768px) {
    .container{
        width: 750px;
    }
}
/* 3.中等屏幕下  大于992px 布局容器的宽度为970px */
@media screen and (min-width: 992px) {
    .container{
        width: 970px;
    }
}
/* 4. 大等屏幕下  大于1200px 布局容器的宽度为1170px */
@media screen and (min-width: 1200px) {
    .container{
        width: 1170px;
    }
}

栅格系统使用

<div class="container">
    <div class="row">
        <!-- 每个占3份 -->
        <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>
    <!-- 如果孩子的分数相加等于12 则孩子能占满整个的container宽度 -->
    <!-- <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-2">4</div>
    </div> -->
    <!-- 小于12 则占不满,有空白-->
    <!-- <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-1">4</div>
    </div> -->
    <!-- 大于12  多余的会另起一行 -->
    <!-- <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-3">4</div>
    </div> -->
        <!-- .row 必须放到 .container布局容器里面 -->
        <!-- 我们实现列的平均划分 需要给列添加类前缀,  .col-lg-3 -->
        <!-- 
        最大宽度    超小屏幕    小屏幕设备     中等屏幕       宽屏设备
        类前缀    .col-xs-    .col-sm-       .col-md-      .col-lg-
        列数                     12
        每一列默认有左右15像素的padding
        可以写多个  <div class="col-lg-3 col-md-4">

		更改原bootstrap样式,要注意权重问题
         --> 
</div>

栅格系统列嵌套

<!-- 
    栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列(12)。
    我们可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。
 -->
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <!-- 我们列嵌套做好加一个行 row 这样可以取消父元素的padding值  而且高度自动和父级一样高 -->
            <div class="row">
                <div class="col-md-4">a</div>
                <div class="col-md-8">b</div>
            </div>
        </div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
    </div>
</div>

栅格系统列偏移

使用.col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距( margin )
<div class="container">
    <div class="row">
        <div class="col-md-4">1</div>
        <!-- 偏移的分数就是 12 - 两个盒子的分数 -->
        <div class="col-md-4 col-md-offset-4">2</div>
    </div>
    <div class="row">
        <!-- 把盒子往右移两份 -->
        <div class="col-md-8 col-md-offset-2">居中盒子</div>
    </div>
</div>

栅格系统列排序

<!-- 通过使用.col-md-push-*  (推)和.col-md-pull-*  (拉)类就可以很容易的改变列( column )的顺序。 -->
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-push-8">left</div>
        <div class="col-md-8 col-md-pull-4">right</div>
    </div>
</div>

响应式工具

.hidden-xs 在超小屏下隐藏  <768px
.hidden-sm 在小屏下隐藏    >768px
.hidden-md 在中屏下隐藏    >992px
.hidden-lg 在大屏下隐藏    >1200px

visible-xs 在超小屏下显示
visible-sm 在小屏下显示
visible-md 在中屏下显示
visible-lg 在大屏下显示

vue中使用

直接在public的index.html中引入即可