1. CSS盒模型
盒模型的四要素
内容(content)、内边距(padding)、边框(border)和外边距(margin)。
两种盒模型的区别
盒模型分为两种:标准盒模型 和 IE盒模型。
标准盒模型
width指的是内容区域content的宽度,height指的是内容区域content的高度。
盒子占据的空间宽度 = width + padding-left + border-left + margin-left + padding-right + border-right + margin-right;
盒子占据的空间高度 = height + padding-top + border-top + margin-top + padding-bottom + border-bottom + margin-bottom;
IE盒模型(怪异盒模型)
怪异盒模型中的width指的是内容 + 内边距 + 边框总的宽度(content + border + padding);height指的是内容 + 边框 + 内边距总的高度。
盒子占据的空间宽度 = width + margin-left + margin-right;
盒子占据的空间高度 = height + margin-top + margin-bottom;
如何选择盒模型
如果定义了完整的doctype的标准文档类型,最终都会触发标准模式。如果协议缺失,会由浏览器自己界定,在IE9以下的版本会触发怪异模式,其他浏览器会默认为w3c的标准模式。
除此之外,我们可以通过box-sizing来设置盒模型的解析模式。
box-sizing有三种值:
- content-box: 默认值,border、padding不算入width范围内,可以理解为w3c的标准模型,将采用标准模式解析
- border-box: border、padding算入width范围内,可以理解为怪异盒模型,将采用怪异模式解析
- padding-box: 将padding算入width范围内
2. 什么是BFC和IFC
Formatting Context是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
BFC
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box,并且参与 block fomatting context。
BFC的布局规则
- 内部的Box会在垂直方向,一个接一个地放置
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个盒子(块盒与行盒)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反),即使存在浮动也是如此。
- BFC的区域不会与float box重叠
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也如此。
- 计算BFC的高度时,浮动元素也参与计算
创建BFC
- float的值不是none
- position的值不是static或者relative
- display的值是inline-block、table-cell、table-caption中的任何一个
- overflow的值不是visible
BFC的作用
- 利用BFC避免margin重叠
- 自适应多栏布局
- 清除浮动
父子元素margin重叠问题的解决方案
<!-- 父子元素margin重叠, margin以二者margin的最大值为准 -->
<div class="parent">
<div class="child"></div>
</div>
// css样式
.parent {
width: 500px;
height: 500px;
margin-top:10px;
background-color: red;
overflow: hidden; /*给父级元素添加overflow:hidden; 解决了父子元素margin重叠的问题*/
}
.parent .child{
width: 100px;
height: 100px;
background-color: blue;
margin-top: 20px;
}
给父元素添加overflow: hidden前,父子元素的margin重叠,margin以二者的最大值为准是20px:
给父元素添加overflow: hidden后,父子元素的margin各自生效:
兄弟元素margin重叠问题的解决方案
可以用和第一种方案一样的原理进行处理,在child2外层再包一层div作为child2的父级元素child2-parent,然后给该child2-parent设置overflow:hidden即可。
第二种方案是使用float,创建一个新的BFC,从而解决margin重叠的问题。解决方案如下:
<!-- 兄弟元素上下margin重叠, margin以二者最大的为准 -->
<div class="parent">
<div class="child child1"></div>
<div class="child child2"></div>
</div>
.parent {
width: 240px;
height: 240px;
margin-top: 30px;
background-color: orange;
}
.parent .child1,
.parent .child2 {
width: 100px;
height: 100px;
}
.parent .child1 {
background-color: yellow;
margin-bottom: 20px;
}
.parent .child2 {
float: left; /*解决了兄弟元素上下margin重叠的问题*/
background-color: pink;
margin-top: 10px;
}
给child2添加float:left前,child1和child2的margin发生重叠,以二者的最大值为准,所以margin是20px:
给child2添加float:left后:
IFC
Inline Formatting Contexts直译为"内联格式化上下文",IFC的line box(线框)高度由其包含行内元素中最高的实际高度计算而来(不受到竖直方向的padding/margin影响)。
inline-level box:display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box,并且参与 inline formatting context。
IFC的布局规则
IFC中的line box一般左右都贴紧整个IFC,但是会因为float元素而扰乱。float元素会位于IFC与与line box之间,使得line box宽度缩短。 同个ifc下的多个line box高度会不同。 IFC中时不可能有块级元素的,当插入块级元素时(如p中插入div)会产生两个匿名块与div分隔开,即产生两个IFC,每个IFC对外表现为块级元素,与div垂直排列
IFC的作用
- 水平居中:当一个块要在环境中水平居中时,设置其为inline-block则会在外层产生IFC,通过text-align则可以使其水平居中。
- 垂直居中:创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。
3. 清除浮动的方法
// 常用的清除浮动的方法
// 方法一
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: '';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
// 方法二
.clearfix:after,
.clearfix:before {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
4. 元素垂直居中的实现方案
<div class="center-parent">
<div class="center"></div>
<div>
4.1 position实现
4.1.1 固定宽高
.center {
width: 100px;
height: 100px;
background: orange;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
4.1.2 不固定宽高,固定宽高也可用
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
4.2 flex实现
.center-parent {
display: flex;
justify-content: center;
align-items: center;
}
5. 三栏布局
5.1 position定位实现
<div class="parent">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
// css样式
.parent {
position: relative;
width: 100%;
height: 200px;
}
.parent .left {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100%;
background: pink;
}
.parent .center {
margin-left: 100px;
margin-right: 150px;
width: 100%;
height: 100%;
background: greenyellow;
}
.parent .right {
position: absolute;
top: 0;
right: 0;
width: 150px;
height: 100%;
background: orange;
}
5.2 flex实现
<div class="parent">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
// css样式
.parent {
display: flex;
width: 100%;
height: 200px;
}
.parent .left {
width: 100px;
height: 100%;
background-color: #eee;
}
.parent .center {
flex: 1;
height: 100%;
background-color: blanchedalmond;
}
.parent .right {
width: 150px;
height: 100%;
background-color: brown;
}
5.3 float实现
<div class="parent">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
// css样式
.parent .left {
float: left;
width: 100px;
height: 200px;
background: orange;
}
.parent .center {
height: 200px;
margin-left: 100px;
margin-right: 150px;
background: pink;
}
.parent .right {
float: right;
width: 150px;
height: 200px;
background: green;
}
5.4 圣杯布局
<div class="parent">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
// css样式
.parent {
height: 200px;
padding-left: 100px;
padding-right: 150px;
}
.parent .center {
float: left;
width: 100%;
height: 100%;
background: #ccc;
}
.parent .left {
float: left;
width: 100px;
height: 100%;
background: rosybrown;
margin-left: -100%;
position: relative;
right: 100px;
}
.parent .right {
float: left;
width: 150px;
height: 100%;
background:yellow;
margin-right: -150px;
}
5.5 双飞翼布局
<div class="parent">
<div class="center">
<div class="inner"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
// css样式
.parent .center {
float: left;
width: 100%;
height: 200px;
}
.parent .center .inner {
height: 100%;
margin-left: 100px;
margin-right: 150px;
background:springgreen;
}
.parent .left {
float: left;
width: 100px;
height: 200px;
background: salmon;
margin-left: -100%;
}
.parent .right {
float: left;
width: 150px;
height: 200px;
background: skyblue;
margin-left: -150px;
}
5.6 table布局
<div class="parent">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
// css样式
.parent {
display: table;
height: 200px;
}
.parent .left {
width: 100px;
height: 100%;
background: thistle;
}
.parent .center {
display: table-cell;
width: 100%;
height: 100%;
background: blue;
}
.parent .right {
width: 150px;
height: 100%;
background: yellow;
}
6. 两栏布局
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
6.1 position定位实现
// css样式
.parent {
position: relative;
width: 100%;
height: 200px;
}
.parent .left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: pink;
}
.parent .right {
margin-left: 200px;
width: 100%;
height: 200px;
background: greenyellow;
}
6.2 float实现
// css样式
.parent .left {
float: left;
width: 200px;
height: 200px;
background: orange;
}
.parent .right {
height: 200px;
margin-left: -200px;
background: green;
}
6.3 flex实现
.parent {
display: flex;
}
.parent .left{
width: 200px;
height: 200px;
background: yellow;
}
.parent .right{
flex: 1;
height: 200px;
background: purple;
}
6.4 table实现
// css样式
.parent {
display: table;
}
.parent .left{
width: 200px;
height: 200px;
background: thistle;
}
.parent .right{
display: table-cell;
width: 100%;
height: 200px;
background: blue;
}
7. 文字溢出显示...
<div class="txt-ellipsis">
我们都是好孩子,最最天真的孩子。我们都是好孩子,最最天真的孩子。
我们都是好孩子,最最天真的孩子。我们都是好孩子,最最天真的孩子。
我们都是好孩子,最最天真的孩子。我们都是好孩子,最最天真的孩子。
我们都是好孩子,最最天真的孩子。我们都是好孩子,最最天真的孩子。
我们都是好孩子,最最天真的孩子。我们都是好孩子,最最天真的孩子。
<div>
单行文字溢出
// css样式
.txt-ellipsis {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
多行文字溢出
// css样式
.txt-ellipsis {
width: 400px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
8. 如何用css实现一个三角形
<div class="trigle"><div>
// css样式
.trigle {
width: 0;
height: 0;
border: 10px solid red;
border-color: red transparent transparent transparent;
/* border-color: transparent red transparent transparent; */
/* border-color: transparent transparent red transparent; */
/* border-color: transparent transparent transparent red; */
}
9. css选择器权重计算方式
具体参考:深入理解CSS选择器优先级的计算
-
如果声明来自于“style”属性,而不是带有选择器的规则(即内联样式),则记为 1,否则记为 0 (= a)(HTML元素的style属性也是样式规则,因为这些样式规则没有选择器,因此记为a=1,b=0,c=0,d=0)
-
计算选择器中 ID 属性的个数 (= b)
-
计算选择器中类选择器 和 属性选择器 和 伪类 出现的总次数 (= c)
-
计算选择器中标签选择器 和 伪元素 出现的总次数 (= d)
将四个数字按 a-b-c-d 这样连接起来(位于大数进制的数字系统中),构成选择器的优先级。 四级(a、b、c、d)之间并不是简单的相加关系。同一级(例如:a对a)的才具有可比关系。如果同一级相等,继续比较下一级,如果a-b-c-d每一级都相等,根据就近原则,写在后面的会覆盖前面的,所以以写在后面的为准。
对于a级选择器(“style”属性的样式规则),根本不参与优先级运算的过程。对于b级(ID选择器)、c级(class选择器)、d级(元素选择器),每一级都有自己的最大值(最大数目255),超出时就会应用其最大值(最大数目)。b级最大值为0xff0000(16711680),权重为0x1000(65536),数目超过256时仍然使用最大值。c级、d级相似。所以并不存在低一级超出一定数目后导致高一级进一出现覆盖的情况。
在一个选择器组(em:#a .d div)中,所有选择器的加和不会超过16777215(每一类的选择器都保证了不会超出最大值的情况)。
对于 !important,webkit是走的另一条路径(具有 !important 的样式规则大于没有 !important 的样式规则,只有在同时具有 !important 属性时才会比较选择器的整体优先级)。
整体来说,在webkit中,!important > inline style > ID > class > tag > 通配符 > 继承。
10. position属性
- static
元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效
- relative
相对定位元素
元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。
在文档中的正常位置偏移给定的值,但是不影响其他元素的偏移。相对于自身偏移。
⚠️ position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
- absolute
绝对定位元素
元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。
- fixed
固定定位元素
元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时,容器由视口改为该祖先。
- sticky
粘性定位元素
元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置
该值总是创建一个新的层叠上下文(stacking context)。注意,一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时),即便这个祖先不是真的滚动祖先。这个阻止了所有“sticky”行为(详情见Github issue on W3C CSSWG)
当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。亦即如果你设置了top: 50px,那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上移动。
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于viewport来计算元素的偏移量
- inherit
继承父元素的position属性,但需要注意的是IE8以及往前的版本都不支持inherit属性。
11. 解释 flex: 0 1 auto;
flex属性是flex-grow,flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
-
flex-grow: 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
-
flex-shrink: 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
-
flex-basis: 定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
12. 优雅降级和渐进增强
优雅降级
优雅降级:一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。优雅降级相当于向下兼容,向下兼容指的是高版本支持低版本的或者说后期开发的版本支持和兼容早期开发的版本,向上兼容的很少。
.transition { /*优雅降级写法*/
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}
优雅降级的写法,优先考虑新版本浏览器的可用性,最后才考虑老版本的可用性。在时期3前缀CSS3和正常CSS3都可用的情况下,前缀CSS3会覆盖正常的CSS3
渐进增强
渐进增强:一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。渐进增强相当于向上兼容。
.transition { /*渐进增强写法*/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
渐进增强的写法,优先考虑老版本浏览器的可用性,最后才考虑新版本的可用性。在时期3前缀CSS3和正常CSS3都可用的情况下,正常CSS3会覆盖前缀CSS3
关于选择
如果低版本用户居多,当然优先采用渐进增强的开发流程;如果高版本用户居多,为了提高大多数用户的使用体验,那当然优先采用优雅降级的开发流程
区别
- 优雅降级是从复杂的现状开始,并试图减少用户体验的供给;而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要
- 降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带
13. 移动端有哪些布局方案
13.1 百分比布局
也叫流式布局,特点是随着屏幕的改变,页面的布局没有发生大的变化,可以进行适配调整,这个正好与自适应布局相补。 用百分比代替固定像素,限制布局盒子的最大最小宽度。
常用场景
- 左侧固定+右侧自适应
- 左右固定宽度+中间自适应(参考京东手机版)
存在问题
- 页面元素的宽度按照屏幕进行适配调整,主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示 。
- 屏幕尺度跨度过大的情况下,页面不能正常显示。只做宽度适配,高度会被拉伸。
优点
元素的宽高用百分比做单位,元素宽高按屏幕分辨率调整,布局不发生变化。
13.2 自适应布局
分别为不同的屏幕设置布局格式,当屏幕大小改变时,会出现不同的布局,意思就是在这个屏幕下这个元素块在这个地方,但是在那个屏幕下,这个元素块又会出现在那个地方。只是布局改变,元素不变。可以看成是不同屏幕下由多个静态布局组成的。
13.3 rem布局
根据根元素html的font-size计算大小,利用媒体查询不同屏幕宽度下字体的大小,利用相对rem代替固定px。
rem的本质是等比缩放,一般是基于宽度。假设UE图能等比缩放,假设我们将屏幕宽度平均分成100份,每一份用x表示,x = 屏幕宽度/100,如果将x作为单位,x前面的数值就代表屏幕宽度的百分比。
存在的问题
- 在奇葩的dpr设备上表现效果不太好,比如 一些华为的高端机型 用rem布局会出现错乱。
- 设置根字体大小的方式有两种,一种是媒体查询,优点:不需要额外使用js去更改html的字体,缺点:不连续,或者说并能完* 全实现对所有设备的布局规范统一;
- 另一种是js动态更改html字体,优点:连续;缺点:不如直接写媒体查询的体验好;
- 不支持css3 calc的需要大量密集的 @media hack;
- 使用iframe引用也会出现问题;
- 需要解决在ios上的1px边框问题,但是这个在lib-flexible中已经解决:(1px变2px, 又被 initial-scale=0.5 缩小了一半
- rem需要引入一个lib库
- html的font-size设置到12px以下还是会按照12px=1rem来计算,这样所有使用了rem单位的尺寸都
网易rem布局
先拿设计稿竖着的横向分辨率除以100得到body元素的宽度:
-
如果设计稿基于iphone6,横向分辨率为750,body的width为750 / 100 = 7.5rem
-
如果设计稿基于iphone4/5,横向分辨率为640,body的width为640 / 100 = 6.4rem
布局时,设计图标注的尺寸除以100得到css中的尺寸,播放器高度为210px,写样式的时候css应该这么写:height: 2.1rem。之所以取一个100作为参照,就是为了这里计算rem的方便!
在dom ready以后,通过以下代码设置html的font-size
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
@media screen and (max-width:321px){
.m-navlist{font-size:15px}
}
@media screen and (min-width:321px) and (max-width:400px){
.m-navlist{font-size:16px}
}
@media screen and (min-width:400px){
.m-navlist{font-size:18px}
}
视口:这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小,也就是device-width
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
13.4 手淘布局方案flexible.js
device-width的计算公式为:
device-width = 设备的物理分辨率/(devicePixelRatio * scale);
在scale为1的情况下,device-width = 设备的物理分辨率/devicePixelRatio 。如果devicePixelRatio * scale = 1,那么device-width = 设备物理分辨率。
devicePixelRatio称为设备像素比,每款设备的devicePixelRatio都是已知,并且不变的,目前高清屏,普遍都是2,不过还有更高的,比如2.5, 3 等,魅族note的手机的devicePixelRatio就是3。淘宝触屏版布局的前提就是viewport的scale根据devicePixelRatio动态设置。
在devicePixelRatio为3的时候,scale为 1/3 = 0.3333; 这么做目的当然是为了保证页面的大小与设计稿保持一致了,比如设计稿如果是750的横向分辨率,那么实际页面的device-width,以iphone6来说,也等于750,这样的话设计稿上标注的尺寸只要除以某一个值就能够转换为rem了。通过js设置viewport的方法如下:
var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
淘宝布局的第二个要点,就是html元素的font-size的计算公式:
根元素的font-size = deviceWidth / 10;
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
一般拿到的设计稿都是750px的,默认将设计稿分成10份,将75px的像素对应一个rem,量的多少的像素相应的做一下换算,若量的的一张图片为30px,则对应的rem为30/75=0.4rem
淘宝也设置了一个临界点,当设备竖着时横向物理分辨率大于1080时,html的font-size就不会变化了,原因也是一样的,分辨率已经可以去访问电脑版页面了。
事实上flexible.js做了这几样事情:
- 动态改写 meta 标签,设置scale的值
- 给 html 元素添加data-dpr属性,并且动态改写data-dpr的值
- 给 html 元素添加font-size属性,并且动态改写font-size的值
13.5 flex布局
弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使 的一些复杂易错的hacks方法(如float实现流式布局)。
高度定死,宽度自适应,元素都采用px做单位。随着屏幕宽度变化,页面也会跟着变化,效果就和PC页面的流体布局差不多,在那个宽度需要调整的时候使用响应式布局就行(比如网易新闻),这就实现了适配。
viewport固定
13.6 媒体查询
利用媒体查询不同的屏幕宽度,给每个不同的设备都写一套样式文件。
缺点:复杂,工作量大,后期难维护
13.7 响应式布局
采用自适应布局和流式布局的综合方式,为不同屏幕分辨率范围创建流式布局。
通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.
利用媒体查询可以检测到屏幕的尺寸(主要检测宽度),并设置不同的CSS样式,就可以实现响应式的布局。
大名鼎鼎的bootstrap就是响应式布局的专家。