开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 9 天,点击查看活动详情
响应式布局
meta
meta 标签,我们可以指定浏览器的适口,适口就是可以看见的区域。然后它有三个需要了解的概念,分别是: layout viewport 浏览器的默认适口,也就是 clientWidth,在 PC 端如果把浏览器最大化的时候我们可以发现 clientWidth 与 innerWidth 是相同的,但是在移动端是不一样的;它是移动设备默认的 viewport。 visual viewport 浏览器的可视区域大小,在手机浏览器中的 innerWidth 是小于 clientWidth,在 PC 端最大化的时候两者是一样的,但是在手机端最大化是两者是不一样的。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
上面代码的意思是:name 是用来指定适口的,content 具体内容,第一个 width 宽度等于设备宽度,initial-scale 缩放比例是 1,最大的缩放比例也是 1,然后不允许用户缩放。里面的 width 和 initial-scale 都是指定 ideal viewport,如果两者都存在,那么取两者之间的较大值
VW 和 VH 是什么? vw 和 vh 是视口(viewport units)单位, 何谓视口,就是根据你浏览器窗口的大小的单位,不受显示器分辨率的影响,是不是很神奇,这就代表了,我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。 vw 是可视窗口的宽度单位,和百分比有点一样,1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是 1800px,那么 1vw = 18px。和百分比不一样的是,vw 始终相对于可视窗口的宽度,而百分比和其父元素的宽度有关。 vh 就是可视窗口的高度了。 vmin 和 vmax,vmin 是指选择 vw 和 vh 中最小的那个,而 vmax 是选择最大的那个
VM、VH 与 rem 的使用 1、页面布局 宽度和高度全部自动适应!再加上 rem 布局的字体适应,可以完美解决各种屏幕适配问题! 故这个 meta 元素的视口必须声明。
响应垂直居中
响应垂直居中 可以使用 vw,vh 来实现在页面中响应垂直居中,只需要以下代码
#box { width: 50vw; height: 50vh; margin: 25vh auto; }
只要设置 margin 的上下间距,使之 heigit + margin-top +margin-bottom = 100 ,width + margin-left + margin-right = 100 ,就能够响应垂直居中
rem
rem 布局-解决字体适配(此布局在 weex 中无法识别) rem 布局原理:根据 CSS 的媒体查询功能,更改 html 根字体大小,实现字体大小随屏幕尺寸变化。
@media only screen and (max-width: 1600px) and (min-width: 1280px){
html{
font-size: 14px;
}
}
@media only screen and (max-width: 1280px) and (min-width: 960px){
html{
font-size: 12px;
}
}
@media only screen and (max-width: 960px){
html{
font-size: 10px;
}
}
meta 标签:meta name="viewport" content="width=device-width, initial-scale=1"
rem:rem 指的是 html 元素的 font-size,html 元素的 font-size 默认是 16px,所以 1 rem = 16px;然后根据 rem 来计算各个元素的宽高,然后配合 media query 就可以实现自适应。
media query(媒体查询):@media screen and (max-width: 360px)
BFC
BFC(Block Formatting Context)格式化上下文,是 Web 页面中盒模型布局的 CSS 渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。
形成 BFC 的条件
1、浮动元素,float 除 none 以外的值; 2、定位元素,position(absolute,fixed); 3、display 为以下其中之一的值 inline-block,table-cell,table-caption; 4、overflow 除了 visible 以外的值(hidden,auto,scroll);
BFC 的特性
1.内部的 Box 会在垂直方向上一个接一个的放置。 2.垂直方向上的距离由 margin 决定 3.bfc 的区域不会与 float 的元素区域重叠。 4.计算 bfc 的高度时,浮动元素也参与计算 5.bfc 就是页面上的一个独立容器,容器里面的子元素不会影响外面元素。
1)BFC 中的盒子对齐 特性的第一条是:内部的 Box(块级元素)会在垂直方向上一个接一个的放置。(这条特性不必纠结,即便不在 BFC 里块级盒子也会垂直排列) (2)外边距折叠 特性的第二条:垂直方向上的距离由 margin 决定 在常规文档流中,两个兄弟盒子之间的垂直距离是由他们的外边距所决定的,但不是他们的两个外边距之和,而是以较大的为准。
解决边距重叠问题: 使两个盒子处于两个 bfc 中就行
margin 塌陷和 margin 合并
父子嵌套元素在垂直方向的 margin,父子元素是结合在一起的,他们两个的 margin 会取其中最大的值. 正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位. 但由于 margin 的塌陷,父级相对浏览器定位.而子级没有相对父级定位,子级相对父级,就像坍塌了一样.
1.给父级设置边框或内边距(不建议使用)
.wrapper{
width:200px;
height:200px;
background-color:red;
margin-top:100px;
border-top:1px solid black;
}
2.触发 bfc(块级格式上下文),改变父级的渲染规则 方法: 改变父级的渲染规则有以下四种方法,给父级盒子添加 (1)position:absolute/fixed (2)display:inline-block; (3)float:left/right (4)overflow:hidden 这四种方法都能触发 bfc,但是使用的时候都会带来不同的麻烦,具体使用中还需根据具体情况选择没有影响的来解决 margin 塌陷
margin 合并
原理:两个兄弟结构的元素在垂直方向上的 margin 是合并的 html
<div class="box1"></div> 2 <div class="box2"></div>
margin 合并问题也可以用 bfc 解决, 1.给 box2 加上一层父级元素并加上 overflow:hidden;
<div class="box1"></div>
<div class="wrapper">
<div class="box2"></div>
</div>
.wrapper{ overflow:hidden; }
position 属性
1、stctic
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)
2、relative
生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
3、absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
4、fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 9 天,点击查看活动详情