CSS
Cascading Style Sheets
层叠样式表
【样式】
(1)内联样式
写在元素的style属性里。
不方便复用。
(2)内部样式
写在head的style标签里。
(3)外部样式
写在外部的css文件里。
【元素之间的关系】
父元素:直接包含子元素的元素。
子元素:直接被父元素包含的元素。
祖先元素:直接或间接包含后代元素的元素。
后代元素:直接或间接被祖先元素包含的元素。
【继承】
祖先元素的样式会被其后代元素继承。
- 一般,把基本样式设置给祖先元素。
- 背景相关、边框相关、定位相关的样式不会被继承。
【选择器】
(1)元素选择器
标签名{}
例:span{}
(2)id选择器
#id{}
例:#p1{}
(3)类选择器
.class{}
例:.class1{}
可以为同一元素设置多个class,多个值用空格隔开。
例:< p class=“a b c” >< /p >
(4)并集选择器(选择器分组)
选择器1, 选择器2, 选择器3{}
(5)交集选择器(复合选择器)
选择器1选择器2选择器3{}
元素选择器类选择器{}
(6)后代元素选择器
祖先元素 后代元素{}
(7)子元素选择器
父元素>子元素{}
- 不推荐使用,兼容性不佳。
(8)兄弟元素选择器
兄元素+相邻的第一个弟元素{}
兄元素~后边所有的弟元素{}
(9)伪类选择器
元素:first-child
- 既是元素,又是父元素的第一个子元素。
元素:last-child
元素:nth-child()
- 括号里填某个数/even/odd。
- ie6不支持。
元素:first-of-type
元素:last-of-type
元素:nth-of-type()
元素:not()
- 否定伪类。
元素:link
- 普通的链接(没访问过的链接)。
元素:visited
- 访问过的链接。
- 只能修改链接的颜色。
元素:hover
- 鼠标移入。
元素:active
- 被点击。
元素:focus
- 获取焦点。
(10)伪元素选择器
元素::first-letter
元素::first-line
元素::selection
- 选中的内容。
元素::before
- p::before{ content:“我会出现在段落的最前面,且不能被选中”; }
元素::after
- p::after{ content:“我会出现在段落的最后面,且不能被选中”; }
(11)属性选择器
元素[属性名]
- 选取指定属性的元素。
- p[title]
元素[属性名=""]
- 选取指定属性值的元素。
- p[title=“a”]
元素[属性名^=""]
- 选取以指定内容开头的属性值的元素。
元素[属性名$=""]
- 选取以指定内容结尾的属性值的元素。
元素[属性名*=""]
- 选取属性值包含指定内容的元素。
(12)通配选择器
*{}
【选择器的优先级(权重)】
【从上往下,优先级依次降低】
!important
- 尽量避免使用。
内联样式(1000)
id选择器(100)
类和伪类选择器(10)
元素选择器(1)
通配(0)
继承的样式(没有优先级)
- 当选择器包含多种选择器时,需要将多种选择器的优先级相加再比较。(并集选择器的优先级是单独计算的)
- 选择器优先级计算不会超过它的最大数量级(即上一级优先级的大小)。
- 当选择器的优先级一样时,选择靠后的样式。
【大小单位】
像素px
- 不同显示器一个像素的大小也不相同;显示效果越好越清晰,像素越小,反之像素越大。
百分比%
- 相对于父元素的百分比。
em
- 相对于当前元素的字体大小
- 1em = 1font-size
rem
- 相对于根元素(html)的字体大小
vw
- 视口宽度。
- 100vw=一个视口宽度。
【颜色单位】
(1)颜色单词
(2)十六进制
#红色绿色蓝色
- 三组的两位十六进制
- 两位两位重复的可以简写(三组都是两位两位重复的才可以简写),如#ffff00=#ff0
(3)RGB
rgb(red, green, blue)
- 0-255
- 0%-100%
(4)RGBA
rgba(red, green, blue, alpha)
- alpha透明度:0-1
(5)HSL
hsl(hue, saturation, lightness)
- hue色相:0-360
- saturation饱和度:0%-100%
- lightness亮度:0%-100%
(6)HSLA
【字体】
(1)color
(2)font-size
默认16px。
最小12px。如果设置小于12px,自动设置为12px。
设置的不是字体本身的大小,是文字框的高度。
px
em
rem
(3)font-family
- 可以同时指定多个字体,多个字体之间用逗号分开;当采用多个字体时,会优先使用前面的字体,如果前面的字体没有再尝试下一个。
- 字体名称有空格的加引号。
- 一般把分类作为最后一个字体,英文字体放在中文字体前面。
- 字体分类:serif衬线字体,sans-serif非衬线字体,monospace等宽字体,cursive草书字体,fantasy虚幻字体。
font-face可以将服务器中的字体直接提供给用户去使用。
问题:加载速度;版权问题;字体格式。
@font-face{
/* 指定字体的名字 */
font-family: 'myfont';
/* 服务器中字体的路径 */
src: url('');
}
图标字体
- 矢量图,不会失真。注意版权问题。
font awesome
- 下载解压
- 将css和webfonts移动到项目中
- 将all.css引入到网页中
- 使用图标字体
/* 通过类 */
<i class="fab(或者是fas) fa-bell"></i>
/*
通过实体
&#x实体编码
*/
<span class="fas"></span>
/*
通过伪元素
1、设置编码
2、设置字体样式
fab
font-family: 'Font Awesome 5 Brands';
fas
font-family: 'Font Awesome 5 Free';
font-weight: 900;
*/
li::before{
content: '\f1b0';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: blue;
margin-right: 10px;
}
阿里字体库
- 下载解压
- 将除了html和demo.css外都移动到项目中
- 将iconfont.css引入到网页中
- 使用图标字体(类似上面)
(4)font-style
- normal
- italic斜体
- oblique倾斜
- inherit
(5)font-weight
- normal:400
- bold:700
- bolder
- lighter
- 数值(100-900):一般用户的计算机往往没有那么多级别的字体,无法达到想要的效果。
(6)font-variant
- normal
- small-caps:小型大写字母(所有字母都以大写形式显示,但是小写字母的大写比大写字母的大小小)。
(7)font
浓缩上面的。
font-size和font-family必须写,且在最后。
【!!!】
在font中也可以指定行高,不指定则使用默认值(会存在先后解析导致覆盖问题)。
- font-size/line-height font-family
- 30px/30px “微软雅黑”
- 性能较好
【行高line-height】
取值:
- px
- 百分比:相对于当前元素字体大小。
- 整数值:相对于当前元素字体大小的倍数。
在行高中,文字是垂直居中的。
【行间距】
根据上面可以计算:行间距=行高-字体大小。
【文本样式】
(1)text-align
- left
- right
- center
- justify:两端对齐(通过调整文本之间的空格大小)
(2)vertical-align
设置文本垂直对齐的方式。
- baseline:默认。父子元素基线对齐。
- top:顶部对齐。父子元素顶部对齐。
- bottom
- middle:子元素的中线和x的中线对齐。不是实际意义上的居中。
图片的基线并非图片下边边缘,还有一段距离。如果给图片设置border的话,图片和border之间还有一段空白。可以通过image{ vertical-align: top; }解决。
table相关:
元素在td中默认是垂直居中的,可以通过vertical-align、text-align来调整。
(3)text-decoration
- none
- underline:a标签默认。
- overline
- line-through
text-decoration: underline red dotted;
chrome和firefox都支持以上写法,ie不支持。
(4)white-space
设置网页如何处理空白。
- normal:默认。文本溢出,换行。
- nowrap:不换行,加滚动条。
- pre:保留预处理格式(代码里写成什么样显示什么样)。
实现网页里标题内容显示不下,用…显示。
.box{
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
(5)letter-spacing
(6)word-spacing
(7)text-transform
- none
- capitalize:单词首字母大写。
- uppercase:所有字母都大写。
- lowercase:所有字母都小写。
(8)text-indent
设置首行缩进。
- 2em
【opacity】
设置元素背景透明度(0-1)。
- ie8及以下浏览器不支持:filter:alpha(opacity=50)
【background】
background-color
background-image: url()
- 背景图片<元素:显示左上角。
- 背景图片>元素:平铺摆满。
- 背景颜色在背景图片后面。
- 渐变是图片!!!
(1)线性渐变
background-image: linear-gradient(to top, red, yellow);//从底部到顶部,红色开头,黄色结尾。
第一个属性取值:
①to bottom(默认,可以省略不写)、to top、to left、to right。
②deg,度数。
③turn,1turn=1圈。
第二三……个属性,颜色可以设置多个。
background-image: linear-gradient(red 50px, yellow);//从50px开始渐变。
background-image: repeating-linear-gradient(red 50px, yellow 100px);//重复渐变。
(2)径向渐变
background-image: radial-gradient(100px 100px, red, yellow);//100x100范围内为渐变,范围外为黄色。background-repeat
- repeat:双方向平铺。
- no-repeat
- repeat-x
- repeat-y
background-position
- 水平位置 垂直位置:
- 使用top、right、left、bottom、center其中两个
- 百分比
- px
background-origin
- 背景图片偏移量的原点。
- padding-box:默认值。
- content-box
- border-box
background-size
- 设置背景图片的大小。
- 第一个值表示宽度,第二个值表示高度:只写一个,则第二个值默认是auto
- cover:图片的比例不变,将元素铺满(高度为元素高度,宽度等比例缩放)
- contain:图片的比例不变,将图片在元素中完整显示(宽度为元素宽度,高度等比例缩放)
background-attachment
- 设置背景图片是否随页面一起滚动。
- scroll
- fixed
设置为fixed时,背景图片的定位永远相对于浏览器的窗口。background-clip
- 设置背景的范围。
- border-box:默认。背景会出现在border和padding和content内。
- padding-box:只出现在padding和content内。
- content-box:只出现在content内。
background
- 整合。不写就使用默认值。
- 没有顺序要求,但是必须background-position/background-size
【雪碧图CSS-Sprite】
可以将多个小图片统一保存在一个大图片中,然后通过调整background-position来显示。
- 使用步骤:
(1)确定要使用的图标
(2)测量图标的大小
(3)根据测量结果创建一个元素
(4)将雪碧图设置为元素的背景图片
(5)设置一个偏移量以显示正确的图片- 优点:一次性将多个图片加载进页面,降低请求的次数,加快访问速度,提升用户的体验。
【元素的层级】
如果元素的层级是一样的,下面的元素会盖住上面的。
z-index
- 没有开启定位的元素不能使用z-index。
- 父元素的层级再高,也不会盖住子元素。
【display】
inline
- 默认。
- 将元素变成内联元素。
block
- 将元素变成块元素。
inline-block
- 将元素变成行内块元素。
table-cell
- 将元素设置为单元格。可以使用td相关的属性。
none
- 不会被显示。
- 【不占位置。】
- 代码中有。
flex
- 设置块级弹性容器。
inline-flex
- 设置行内弹性容器。
【visibility】
visible
- 默认。
hidden
- 不会被显示。
- 【占位置。】
- 代码中有。
【overflow】
visible
- 默认。
- 淌出去,不做处理。
hidden
scroll
- 不论内容是否溢出,都会添加双方向滚动条。
auto
- 根据需求自动添加滚动条。
【盒子模型】
(1)margin(垂直外边距重叠)
【影响盒子的位置】
由于元素是靠左上摆放的,设置左上外边距时会改变盒子自身的位置。设置右下外边距时会改变其他盒子的位置。
垂直外边距重叠(margin collapse):在网页中垂直方向的相邻外边距会发生外边距的重叠。
- 发生margin collapse的是兄弟元素
相邻外边距中取最大值。- 发生margin collapse的是父子元素
(1)父元素设置padding=1px或者border=1px,再height-1px(因为子元素在父元素的content里,设置padding或border可以将父子元素的margin隔开)
(2)父元素设置padding-top=100px,再height-100px
(3)在子元素前面放一个空的table标签
(4)给子元素添加一个类.clearfix::before{ content:""; display:table; }
许多浏览器都为元素设置了默认的margin和padding,解决方法:*{ margin: 0; padding: 0;}
【盒子可见框的大小由border、padding和content共同决定】
(2)border
border-width
- 四个值(上、右、下、左)
- 三个值(上、左/右、下)
- 两个值(上/下、左/右)
- border-xxx-width
border-color
- 和上面类似
border-style
- 和上面类似
- none(默认)
- solid
- dotted
- dashed(虚线)
- double(双线)
border-radius
- 四个值(左上、右上、右下、左下)
- 三个值(左上、右上/左下、右下)
- 两个值(左上/右下、右上/左下)
- border-xxx-xxx-radius
border
- 不能分别指定四条边
border-xxx
table相关:
border-spacing
- 设置table边框和td边框之间的距离。
border-collapse
- border-collapse: collapse;
- table边框和td边框合并。
- 如果设置了的话,border-spacing自动失效。
(3)padding
padding
padding-xxx
(4)content
width、height设置的是内容区。
background-color会延伸到内边距。
(5)outline
用法和border一样。
不会影响盒子可见框的大小。
(6)box-sizing
指定width和height的作用范围。
- content-box
默认值。width和height指的是内容区的总大小。- border-box
width和height指的是内容区和内边距和边框的总大小。
(7)box-shadow
水平偏移量 垂直偏移量 模糊半径 阴影颜色(一般rgba(0,0,0,.3))
不会影响盒子可见框大小。
【内联元素的盒模型】
(1)margin
支持水平外边距。水平方向的相邻外边距不会重叠。
不支持垂直外边距。
(2)border
支持水平内边距,会影响布局。
支持垂直内边距,不会影响布局。
(3)padding
同上。
(4)content
不能设置width和height。
【水平方向的布局等式】
子元素的margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素内容区的宽度
以上等式必须满足,如果左式相加结果使得等式不成立,发生过度约束,则等式会自动调整。
- 如果左式七个值中没有一个设置为auto,则自动调整margin-right值使得等式成立。
- 如果width、margin-left和margin-right中其中一个设置为auto,则自动调整设置为auto的值。
- 如果width设置为auto,margin-left和margin-right中其中一个设置为auto,则width自动调整为最大,另一个为0。
- 如果width固定,margin-left和margin-right都设置为auto,则margin-left=margin-right。
【定位position】
(1)static
默认。
【开启定位后,可以通过left、right、top、bottom设置元素的偏移量】
(2)相对定位relative
相对其原来位置。
使元素提高一个层级。
(3)绝对定位absolute
相对于其包含块(containing block)。
- 包含块正常情况下就是离当前元素最近的、开启了定位的祖先元素。
- 如果所有祖先元素都未开启定位,则包含块为根元素(html为根元素、初始包含块)。
脱离文档流。
使元素提高一个层级。
水平方向的布局等式增加两个值left、right。
- 子元素的left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 父元素内容区的宽度
- 如果左式9个值中没有一个设置为auto,则自动调整right值使得等式成立。
- 如果width、margin、left和right中有设置为auto,则自动调整设置为auto的值。
- 如果未设置left和right(left和right默认值为auto),则自动调整left和right。
垂直方向的布局等式必须满足。
- 元素的top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + bottom = 包含块的高度
(4)固定定位fixed
是一种绝对定位。
相对于浏览器的视口(viewport),浏览器窗口左上角。
脱离文档流。
使元素提高一个层级。
ie6不支持固定定位。
(5)粘滞定位sticky
和相对定位差不多,但是在到达某个位置时将其固定。
兼容性不佳。
【float】(高度塌陷)
- none
- left
- right
- 元素浮动后,会尽量向页面的左上或右上浮动,直到遇到父元素或者其他浮动元素。
- 如果浮动元素上边是一个没有浮动的块元素,则浮动元素不会超过块元素。
- 浮动元素不会超过他上边的兄弟元素。
- 浮动元素不会盖住文字,文字会自动环绕在浮动元素周围。
高度塌陷:如果父元素包含的元素全是浮动元素,则该元素高度变成0。
BFC(块级排版上下文Block Formatting Context)
(1)默认关闭。
(2)开启后的特性:
- 父元素的垂直外边距不会和子元素重叠。
- 不会被浮动元素所覆盖。
- 可以包含浮动的子元素。
(3)开启的方法:
- 根元素
- 设置元素浮动display: float:导致父元素宽度丢失,导致下边的元素上移。
- 设置元素绝对定位position: absolute。
- 设置元素为inline-block:导致宽度丢失。
- 设置元素为flex子项或grid子项。
- 设置display: flow-root。
- 设置overflow为非visible的值:设置为hidden是副作用最小的方法。
(4)ie6及以下的浏览器并不支持BFC,但有hasLayout属性类似于BFC。将元素的zoom设为1即可。(只在ie有效)
在高度塌陷的父元素内最后,添加一个空白div,设置clear: both
- 基本没有副作用,兼容性好,但会在页面中添加多余的结构。
利用after伪类.clearfix::after{ content: “”; display: block; clear: both; }和ie中.clearfix{ zoom: 1; }
终极修复margin collapse和高度塌陷万金油
.clearfix::before, .clearfix::after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
【clear】
指定元素的哪一侧不允许浮动元素(清除浮动)。
- none
- left
- right
- both:清除对它影响最大的。
【文档流normal flow of the document】
块元素
- 默认宽度为父元素的100%。
- 默认高度被内容撑开。
内联元素
- 默认宽度和高度被内容撑开。
脱离文档流
当(1)设置了float(2)开启绝对定位(3)开启固定定位时会脱离文档流。
块元素
- 默认宽度和高度被内容撑开。
内联元素- 变成行内块元素。
【flex】
弹性容器
弹性元素(弹性项)
主轴
侧轴:和主轴垂直。
弹性容器
flex-direction
- 容器中弹性元素的排列方向。(等于主轴)
- row:默认值,水平从左到右。
- row-reverse:水平从右到左。
- column:垂直从上到下。
- column-reverse:垂直从下到上。
flex-wrap
- 设置弹性元素是否在弹性容器中自动换行。
- nowrap:默认值,元素不会自动换行。
- wrap:元素沿着侧轴方向自动换行。
- wrap-reverse:元素沿着侧轴反方向换行。
flex-flow
- flex-direction和flex-wrap的整合。
- flex-flow: row wrap;
justify-content
- flex-start:第一个元素贴着主轴起边,各个元素紧贴。
- flex-end:最后一个元素贴着主轴终边,各个元素紧贴。
- center:元素居中排列。
- space-around:空白分布到元素两侧。
- space-evenly:空白分布到元素单侧。
- space-between:空白均匀分配到元素之间。
align-items
- 元素在侧轴上如何对齐
- stretch:默认值,将元素的长度设为相同的值。
- flex-start:元素不会拉伸,沿着侧轴起边对齐。
- flex-end:沿着侧轴终边对齐。
- center:居中对齐。
- baseline:基线对齐。
align-content
- 和justify-content类似。
弹性元素
align-self
- 覆盖当前弹性元素上的align-items。
flex-grow
- 指定弹性元素的伸展系数。当父元素有多余空间时,子元素按照比例进行分配。
- flex-grow: 1;
flex-shrink
- 指定弹性元素的收缩系数。当父元素的空间不足容纳所有的子元素时,子元素按照比例进行收缩。
- flex-shrink: 0;
flex-basis
- 弹性元素在主轴上的基础长度。
- 默认值auto,参考自身元素的宽度或高度。
flex
- flex-grow、flex-shrink、flex-basis整合。
- flex: initial代表flex: 0 1 auto;
- flex: auto代表flex: 1 1 auto;
- flex: none代表felx: 0 0 auto;
order
- 指定元素的排列顺序。
移动端无脑使用flex。pc端ie8、9可能不支持,要用float。
【Hack】
(1)条件Hack
只对ie浏览器有效,其他浏览器视为注释。(ie10及以上已经不支持)
<!--[if IE]> ... <![endif]-->
<!--[if IE 版本]> ... <![endif]-->
<!--[if lt IE 版本]> ... <![endif]-->
<!--[if lte IE 版本]> ... <![endif]-->
<!--[if !IE 版本]> ... <![endif]-->
(2)属性Hack
在样式属性名前面加
- -(选择ie6及以下)
- *(选择ie7及以下)
在样式值后添加
- \9(选择ie6及以下)
- \0(选择ie8及以上)
(3)选择器Hack
在选择器前添加*html,则该选择器只有ie6可以识别。
【transition】
transition-property
- 规定要执行过渡的属性。(一般可以计算的属性就可以过渡;过渡必须是一个有效值向另一个有效值过渡)
- width
- height
- all
transition-duration
- 指定过渡效果的持续时间。
- 时间s和ms,要写出来。
transition-timing-function
- 指定过渡的执行方式。
- ease:默认。慢速开始,先加速再减速。
- linear:匀速。
- ease-in:加速运动。
- ease-out:减速运动。
- ease-in-out:先加速,后减速。
- cubic-bezier():指定时序函数。贝塞尔曲线转换
- steps(n):分n步执行过渡效果。闪现。
可以设置第二个属性值:
end:默认,在时间结束时执行过渡。
start:在时间开始时执行过渡。
transition-duration: 2s; steps(2, end);表示2s分成两步走,每一步是1s,在时间段1s的结束时执行过渡。transition-delay
- 过渡效果的延迟。
transition
- 整合。
- 如果要写transition-delay,前面一个时间指的是transition-duration,第二个时间指的是transition-delay。
【animation】
动画和过渡类似,都是可以实现一些动态的效果。不同的是过渡需要在某个属性发生变化时才会触发,动画可以自动触发动态效果。
.box{
/* 要对当前元素生效的关键帧的名字 */
animation-name: test;
animation-duration: 2s;
animation-delay: 2s;
animation-timing-function: linear;
/*
动画执行的次数;
次数 or infinite
*/
animation-iterator-count: 2;
/*
动画执行的方向;
normal(默认)
reverse
alternate(先正后反,交替执行)
alternate-reverse
*/
animation-direction: normal;
/*
设置动画的执行状态;
running(默认)
paused
*/
animation-play-state: running;
/*
动画的填充模式;
none(默认):动画执行完毕,元素回到原来位置(是原始位置不是关键帧开始位置)。
forwards:动画执行完毕,元素会停止在动画结束的位置。
backwards:动画延时等待时,元素就处于动画开始的位置。
both:结合了forwards和backwards。
*/
animation-fill-mode: none;
/*
整合。
animation: ;
*/
}
@keyframes test{
from, 50%{
margin-left: 0;
}
to{
margin-left: 700px;
}
}
【transform】
设置元素的变形效果,不会影响页面的布局。
transform: 函数
- 平移
translateX():沿着x轴方向(→)平移。
translateY():沿着y轴方向(↓)平移。
translateX():沿着z轴方向平移。
数值可以是px,也可以是百分比(表示相对于自身宽度的百分比)。- 旋转
rotateX():沿着x轴旋转。
rotateY():沿着y轴旋转。
rotateZ():沿着z轴旋转。
数值可以是deg,也可以是turn。- 缩放
scaleX():水平方向缩放。
scaleY():垂直方向缩放。
scale():双方向缩放。
backface-visiblity
- 是否显示元素的背面。
- hidden。
transform-style
- 设置3d变形效果。
- preserve-3d。
transform-origin
- 缩放源点。
- center:默认。
- x y。
【变量函数】
/*
原生css也支持变量。
语法:--变量名: 变量值;
用法:var(--变量名);
兼容性不好,ie不支持。
*/
html{
--color: #bfa;
}
.item{
color: var(--color);
}
/*
calc()
ie9以上支持。
*/
.item{
width: calc(1000px/2);
}
【像素】
- 默认情况下,在PC端,1CSS像素=1物理像素。
一个CSS像素最终由几个物理像素显示,由浏览器决定。- 手机像素大小<<计算机像素大小。
- 像素比=CSS像素/物理像素。
【视口viewport】
- 视口是屏幕中用来显示网页的区域。
- 可以通过视口viewport来计算CSS像素和物理像素之间的比值。
移动端
- 默认情况下,移动端视口设为980px(CSS像素)。
- 完美视口是将像素比设置为最佳像素比的视口大小。
- device-width表示设备的宽度(完美视口)。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
【响应式布局】
网页可以根据不同的设备或窗口大小呈现出不同的效果。
【媒体查询】
@media 媒体类型{}
媒体类型
- 使用逗号连接多个媒体类型。
- 在媒体类型前添加一个only,表示只有(为了兼容老版本浏览器)。
- all:所有设备
- print:打印设备
- screen:带屏幕的设备
- speech:屏幕阅读器
@media (媒体特性){}
媒体特性
width:视口宽度
@media (width: 500px){body{ }}
min-width
max-width
height:视口高度
断点
- max-width: 768px超小屏幕(手机)
- min-width: 768px小屏幕
- min-width: 992px中型屏幕(ipad)
- min-width: 1200px大屏幕(电脑)
@media (min-width: 500px), (max-width: 700px){}
@media only screen and (min-width: 500px) and (max-width: 700px){}