目录
1. 元素
2. 文本
3. 布局
4. 其他元素
5. animation动画
6. 适配
CSS
全称Cascading Style Sheets，即层叠样式表
使内容与表现分离：定义了如何显示[修饰]HTML元素。
最新的css标准：css3
3种：外部样式表、内部样式表、内联样式
根据所在位置，分为3种（优先级从小到大）：
外部样式表（可用于多个页面）
内部样式表（位于 <head> 标签内部）必须位于外部样式表链接的下面
内联样式（元素内部）
发生重叠时：
相同部分按优先级
不同部分相加。
外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
内部样式表
<head>
<style type="text/css">
hr {color: Sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
内联样式表
<p style="color: sienna; margin-left: 20px;">
This is a paragraph
</p>
语法规则
selector {
property: value;
/*
property2: value2;
*/
}
selector1,selector2 {property: value;property2: value2;} 修饰多个
selector subSelector ...{property: value;property2: value2;} 修饰最后一个subSelector（影响所有后代）
selector>subSelector {property: value;property2: value2;} 修饰最后一个（仅影响selector的子元素）
selector1+selector2 {property: value;property2: value2;} 修饰最后一个（后边相邻的一个兄弟元素）
selector1~selector2 {property: value;property2: value2;} 修饰最后一个（后边相邻的所有兄弟元素）
[属性]{property: value;}
[属性=具体值]{property: value;}
selector[属性=具体值]{property: value;}
说明：
select选择符可以是
标签选择器（h1、div等）
ID选择器（#idName）
只能在文档中使用一次
类选择器（.className）
可以为一个元素同时设置多个样式class="class1 class2"
注释：/**/
通用选择器： *{}
大小写不敏感（但是用到的html中的class和id名是区分的）
property: value后必须有；
最好一个声明占一行
最好最后一行property: value也加；，便于修改添加
某些样式会被子元素继承，如：color，某些不能，如：border
冲突时权值越大优先级越高，权值相同时最后者优先级高。标签选择器的权值为1，类选择器的权值为10，ID选择器的权值最高为100。!important设置最高权值p{color:red!important;}
示例
元素选择器（类型选择器）
h1 {color:red; font-size:14px;}
分组选择器
h1,h2,h3,h4,h5,h6 {color: green;}
派生选择器（包含选择器，任意后代为a）
div a {
font-style: italic;
font-weight: normal;
}
子元素选择器（仅子代为a）
div > a {color:red;}
相邻兄弟选择器（a紧跟div）
div + a {color:red;}
id选择器 <p id="idName">hello</p>
#idName{color: green;}
id选择器和派生选择器结合 <div id="idName"><p>hello</p></div>
#idName p{color: green;}
类选择器 <p class="className">hello</p>
.className{color: green;}
多类选择器 <p class="className className2">hello</p>
.className{color: green;} .className2{color: green;}
.className .className2{color: green;}
类选择器和派生选择器结合 <div class="className"><p>hello</p></div>
.className p{color: green;}
属性选择器
包含title属性
[title]{
color:red;
}
多属性
[title][href]{
color:red;
}
title属性值为hello
[title=hello]{
border:5px solid blue;
}
包含hello（hello左右不能有其他字符，空格除外）
[title~=hello] { color:red; }
包含hello
[title*=hello] { color:red; }
以hello开头(且不能跟随有其他字母字符)
[title|=hello] { color:red; }
以hello开头
[title^=hello] { color:red; }
以hello结尾
[title^=hello] { color:red; }
input元素type属性值为text
input[type="text"] { width:150px;}
元素分类
块状元素：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
内联元素：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
内联块状元素：
<img>、<input>
说明：
1、块状元素默认前后都有回车、宽度默认100%，可设置元素的高度、宽度及顶部和底部边距
2、内联元素前后没有回车，不可设置元素的高度、宽度及顶部和底部边距。
3、内联块状元素前后没有回车，可设置元素的高度、宽度及顶部和底部边距。
4、display:block使内联元素显示转为块状元素。display:inline使块状元素显示转为内联元素。内联块状元素display:inline-block。
5、 添加float、position:absolute后，会隐式变为display:inline-block
6、水平居中：
内联元素设置父元素的text-align
固定宽度块状元素设置左右margin为auto
非固定宽度块状元素
1、加入table
2、设置 display: inline，加text-align:center
3、设置 position:relative
父元素+float:left;position:relative;left:50%
子元素+position:relative;left:-50%;
7、垂直居中
父元素固定高度的单行文本
父元素+line-height和height值一致;
父元素固定高度的多行文本
1、加入table，并vertical-align：middle
1. 元素
元素结构图
说明：
element : 元素。
padding : 内边距。可选，默认值是零。
border : 边框。可选，默认值是零。
margin : 外边距。可选，默认值是零。
内边距padding
p{
padding: 10px;
padding: 10%; 父元素宽
padding: 10px 0.25em 2ex 20%; 上、右、下、左
padding: 10px 20%; 上下，左右
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex; 宽/高*width可以自适应图片高
padding-left: 20%;
}
外边距margin
p{
margin: 10px;
margin: 10%; 父元素宽
margin: 10px 0.25em 2ex 20%; 上、右、下、左
margin: 10px 20%; 上下，左右
margin-top: 10px;
margin-right: 0.25em;
margin-bottom: 2ex;
margin-left: 20%;
margin:auto; 纵向居中（一个声明要放在单个声明上面，以防覆盖）
}
外边距合并
当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
行内框、浮动框或绝对定位之间的外边距不会合并。
边框
p{
一个声明
border: medium double rgb(250,0,255)
border-top:thick double #ff0000;
border-right:thick double #ff0000;
border-left:thick double #ff0000;
border-bottom:thick dotted #ff0000;
风格
border-style: solid实线 dotted点线 dashed虚线 double; 上右下左
border-top-style:dotted; none
border-right-style:dotted;
border-bottom-style:dotted;
border-left-style:dotted;
宽度
border-width: 15px 5px 15px 5px; 上右下左
border-width: 5px; thin 、medium 和 thick
border-top-width: 15px;
border-right-width: 5px;
border-bottom-width: 15px;
border-left-width: 5px;
颜色
border-color: blue rgb(25%,35%,45%) #909090 red;
border-color: blue red;
border-top-color: red; transparent透明
border-right-color: red;
border-bottom-color: red;
border-left-color: red;
圆角
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
border-top-left-radius:2em;
border-top-right-radius:2em;
border-radius:2em;
border-radius:50%; 切圆
边框图片
兼容各浏览器
-moz-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* 老版本的 Firefox */
-webkit-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* Safari */
-o-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* Opera */
border-image: url(/i/border_image_button.png) 0 14 0 14 stretch;
重复
border-image-repeat: repeat;
边框图片向内偏移
border-image-slice: 50% 50%;
边框图片向外偏移
border-image-outset: 30 30;
边框图片
border-image-source: url(border.png);
边框图片宽
border-image-width: 30 30;
边框阴影 (配合hover可以做出立体效果)
box-shadow: 10px 10px 5px #888888;
}
轮廓
外边距边框（最外层）
p{
一个声明
outline:#00ff00 dotted thick;
颜色
outline-color:#00ff00;
风格（dotted，dashed，solid，double，groove，ridge，inset，outset）
outline-style:dotted;
宽度（thin medium thick 1px inherit）
outline-width:thin;
向外偏移
outline-offset:15px;
}
背景
颜色：
red
#ff0000
#f00
rgb(255,0,0)
rgb(100%,0%,0%)
transparent透明默认
rgba(255,0,0,0.5)
hsl(120,65%,75%)
hsla(120,65%,75%,0.3)
p {
一个声明
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
背景色（可以为所有元素设置背景色，不能继承，默认控件背景透明）
background-color: gray; padding: 20px;
背景图片
默认背景图片为none无
background-image: url(/i/eg_bg_03.gif);
背景图片y / x方向重复
background-repeat: repeat-y;
background-repeat: repeat-x;
背景图片不重复，居中显示
background-repeat:no-repeat;
背景图片位置
background-position:50% 50%; 或下方同等
background-position:center; top、bottom、left、right 和 center
(左 上)
background-position:50px 100px;
背景固定，不随网页内容滚动
background-attachment:fixed
背景剪裁
background-clip:content-box; 内容，padding-box内边距+内容，border-box
背景图像的位置
background-origin:content-box;
背景图片的大小
background-size:63px 100px; contain(全) cover（比例裁剪）
}
大小
width、height
max-height、min-height、max-width、min-width：
auto
%
px
尺寸
% 百分比
in 英寸
cm 厘米
mm 毫米
em 1em 作为字体大小时等于父元素字体大小。作为其他属性值时相对于本身字体大小。
ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt 磅 (1 pt 等于 1/72 英寸)
pc 12 点活字 (1 pc 等于 12 点)
px 像素 (计算机屏幕上的一个点)
定位
position属性
1. static
默认（文档流），不指定定位方式时。
块级元素生成一个块框，内联元素生成一个行内框。
left right top bototm无效。
2.relative
相对原来位置定位。
原位置所在框所占空间依旧存在（在文档流）。
距是距自己（原来位置）
top距上，left距左。
bottom距下（会向上移），right距右。
3.absolute
放置在指定位置（相对最近的已定位（static不算）祖先元素，若无则相对于最初的包含块body）。
为块级框，原位置所在框所占空间（不在文档流）不存在。
距是距（最近的已定位的）父元素定位
top距上，left距左。
bottom距下，right距右。
4.fixed
同 absolute，但永远相对body。(不在文档流中)
距是距body
top距上，left距左。
bottom距下，right距右。
5.inherit
继承父元素的属性
float属性（浮动）
浮动框 向左/向右 移动，直到外边缘碰到包含框或另一个浮动框为止。
浮动框会从文档的普通流中删除（不在文档流中）,会造成覆盖。
浮动框使块元素变成内联元素。
在float元素后加一个div clear可以防止位置错乱（使其在文档流中，占空间）
clear:both; 左右两侧不允许出现浮框。 left、right、both 或 none
display属性
block：将内联元素转为块级元素
inline：将块级元素转为内联元素
none：不再显示（不再占空间）
元素分为：
1.块级元素（块框），前后都会换行
如：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li，
2.内联元素（行内元素，行内框），前后无换行
如：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
z-index属性
元素的叠加顺序,从父元素算
大在小上。
auto不参与层级。
负值：在普通文档流（默认：0）下
正常文档流，后写的元素在前面的元素上面。
display:none; float 均会使脱离文档流
clear:both; 不会
overflow属性
scroll溢出部分滚动，hidden隐藏，auto自动滚动,visible,inherit
overflow-y属性(或 overflow-x)：
scroll溢出部分滚动，hidden隐藏，auto自动滚动,visible,no-display,no-content
left right top bottom 属性
px inherit % auto
clip属性（剪裁）
rect(0px 50px 200px 0px);
visibility( 是否可见)
visible
hidden 仍然占空间
对齐
纵向对齐（垂直对齐）
margin: auto;
横向居中（水平居中）
padding: 10px 0;
文本对齐（left，right，center）
text-align: center;
line-height
transform: translate(-50%, -50%);
2. 文本相关
文本色
p{color:#00ff00} blue rgb(25%,35%,45%) rgb(133,45,200)
水平对齐(对块状中的文本、图片)
p {text-align:center} 默认left、right 和 center justify
纵向对齐
vertical-align:text-top;
方向
p {direction: rtl} ltr左向右默认，rtl右向左，inherit继承
字间隔（默认0）
p {
word-spacing: 30px;
word-spacing: -0.5em;
}
字符间隔
p {
letter-spacing: 20px;
letter-spacing: -0.5em;
}
行间距
p {
line-height: 90%;
line-height: 10px;
line-height: 0.5;
}
缩进（可被继承）
p {text-indent: -5em;padding-left: 5em;}
p {text-indent: 20%;}
空格
p {white-space: normal;} normal忽略,pre保留,nowrap不换行直到br,pre-wrap保留且支持换行,pre-line忽略空格保留换行(通常不使用pre无法适配，使用pre-line)
字母大小写转换
p {
text-transform: uppercase; none，uppercase全大写，lowercase全小写，capitalize首字母大写
}
文本划线
p {
text-decoration: none; none,underline下划线,overline上划线,line-through删除线,blink闪烁
text-decoration: underline overline;
}
阴影（立体文本）
text-shadow:2px 2px #FF0000; 横向 纵向 模糊距离 颜色
字体
一个声明（至少要指定 font-size 和 font-family。font-size 与 line-height 中间要加入“/”斜扛）
p {font:italic bold 12px/30px arial,sans-serif;}
该字体系列中选择一个使用
p{font-family: sans-serif;}
指定具体的字体，字体名中有空格则用引号
p{font-family: Georgia;}
从左往右寻找字体
p{font-family: Georgia,sans-serif;}
字体大小（默认16 像素 (16px=1em)）
p {font-size:14px;} smaller，larger，50%，inherit，3.75em，14px
字体风格
p{font-style:normal;} normal正常显示，italic斜体显示，oblique倾斜显示
字体变形
p {font-variant:small-caps;}
字体加粗
p{font-weight:normal;} normal标准,bold粗体,bolder更粗,lighter更细，100 200...700，
导入字体
@font-face {
font-family: BebasNeue-webfont;
src: url('../fonts/BebasNeue-webfont.ttf');
}
适配字体
@media screen and (min-width: 1024px) and (max-width: 1920px){
.htmlCSS{
font-family: "微软雅黑";
font-size:10px;
}
}
@media screen and (min-width: 0px) and (max-width: 1024px) {
.htmlCSS{
font-family: "微软雅黑";
font-size:8px;
}
}
em
相对父元素的大小
设置html字体为10px,则他的子元素1em为10px;
rem
永远相对根元素（html）
3. 布局相关
div
<div>
</div>
表格
<table>
<tr> 行
<th>Firstname</th> 表头
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td> 列
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
table, th, td{
边框
border: 1px solid blue;
边框边距
border-spacing:10px 50px;
折叠边框
border-collapse:collapse;
隐藏空单元格
empty-cells: hide;
宽高
width:100%;
height:50px;
文本对齐
text-align:right;
vertical-align:bottom;
内边距
padding:15px;
背景色
background-color:green;
文本色
color:white;
表格标题位置
caption-side:bottom;
}
列表
常用于导航栏
默认：纵向，float：横向
可配合@media属性改变水平或垂直方式
display或visibility可以实现下拉菜单
ol{
左边点风格
list-style-type :decimal; 数字，lower-roman小写罗马数字，upper-roman大写罗马数字，lower-alpha小写英文字母，upper-alpha大写英文字母，decimal-leading-zero 01始
}
ul {
左边点风格
list-style-type : square; square方块，circle空心圆，disc实心圆，none无，
左边点图片
list-style-image : url(xxx.gif);
左边点位置
list-style-position: inside;
一个声明
list-style : url(example.gif) square inside;
}
示例：导航栏
<!DOCTYPE HTML>
<html>
<body>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content{
display:block;
}
</style>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">下拉菜单</a>
<div class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</li>
</ul>
</body>
</html>
4. 其他元素
开关
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
<label class="switch">
<input type="checkbox" checked>
<div class="slider"></div>
</label><br><br>
<label class="switch">
<input type="checkbox">
<div class="slider round"></div>
</label>
加载框
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid blue;
border-right: 16px solid green;
border-bottom: 16px solid red;
border-left: 16px solid pink;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<div class="loader"></div>
上一页、下一页
<style>
a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
a:hover {
background-color: #ddd;
color: black;
}
.previous {
background-color: #f1f1f1;
color: black;
}
.next {
background-color: #4CAF50;
color: white;
}
.round {
border-radius: 50%;
}
</style>
<a href="#" class="previous">« 上一页</a>
<a href="#" class="next">下一页 »</a>
<a href="#" class="previous round">‹</a>
<a href="#" class="next round">›</a>
链接
a:link {color:#FF0000;text-decoration:none;} /* 未被访问的链接 */
a:visited {color:#00FF00;text-decoration:none;} /* 已被访问的链接 */
a:hover {color:#FF00FF;text-decoration:underline;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;text-decoration:underline;} /* 正在被点击的链接 */
可配合选择器使用
a.className{}
注意：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
除a外其他伪类（可配合选择器使用）：
鼠标在元素上
:hover
元素的最后一个子对象
元素:last-child {font-weight: bold;}
元素的首个子对象
元素:first-child {font-weight: bold;}
元素的首个子元素类型对象
元素>子元素:first-child {font-weight: bold;}
获取焦点时
input:focus{
background-color:yellow;
}
为属性值为 no 的q元素定义引号的类型
q:lang(no){
quotes: "~" "~"
}
所有禁用的元素
:disabled
所有没有子元素的元素
:empty
所有可用的元素
:enabled
第一行
:first-line
第一个字符
:first-letter
元素前面
:before
元素后面
:after
所有仅有一个子元素为该元素的元素
:only-of-type
所有仅有一个子元素的该元素
:only-child
"required"属性的input元素
input:required
没有"required"属性的input元素
input:optional
只读属性的input元素
input:read-only
可读写属性的input元素
input:read-write
所有选中的input元素
input:checked
伪元素 （只能用于块级元素）
selector:pseudo-element {property:value;}
selector.class:pseudo-element {property:value;}
适用以下属性：font，color，background，word-spacing，letter-spacing，text-decoration，vertical-align，text-transform，line-height，clear
首行
p:first-line{
color:#ff0000;
font-variant:small-caps;
}
首字母
p:first-letter{
color:#ff0000;
font-size:xx-large;
}
用户可调整大小
div{
resize:both;
overflow:auto;
}
none
vertical
horizontal
透明
img{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本*/
}
修改外观
div{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari 和 Chrome */
}
有的无效
normal 默认
icon 图标
window 窗口
button 按钮
menu 一套选项
field 输入框
5. animation动画
<style>
定义动画
/*目前浏览器都不支持 @keyframes 规则*/
@keyframes mymove{
from {top:0px;left:0px; background:red; width:100px;}
to {top:200px;left:100px; background:yellow; width:300px;}
}
/* 支持浏览器Firefox */
@-moz-keyframes mymove {
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
/* 支持浏览器Safari and Chrome */
@-webkit-keyframes mymove{
from {top:0px;}
to {top:200px;}
}
/* 支持浏览器Opera */
@-o-keyframes mymove{
from {top:0px;}
to {top:200px;}
}
使用动画
div{
width:100px;
height:100px;
background:red;
position:relative;
绑定动画
兼容各浏览器,一个声明
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
动画名
animation-name: mymove; none
。。。 适配其他浏览器
时长
animation-duration:2s;
。。。
速度曲线
animation-timing-function: linear; 匀速，ease快慢快，ease-in慢快，ease-out快慢，ease-in-out慢快慢，cubic-bezier(0,0,1,1);
。。。
延迟
animation-delay:2s;
。。。
动画播放次数
animation-iteration-count:3; infinite无限
。。。
下一周期播放方式
animation-direction:alternate; 反向，normal正向。
。。。
动画结束时方式
animation-fill-mode: forwards; 保持最后一帧
}
</style>
型变
transition: .5s ease; 时间 方式
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
交互
cursor鼠标类型
auto,crosshair, default, pointer手, move,e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize,text,wait,help
6. 适配
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
- 布局适配
@media
针对分辨率范围---设置不同布局
@media screen and (min-width: 800px) and (max-width: 1920px){
/*css样式*/
}
@media screen and (min-width: 0px) and (max-width: 800px){
/*css样式*/
}
<link type="text/css" rel="stylesheet" href="public/styles/1.css" media="screen and (max-width:320px)"/>
针对不同媒介---设置不同布局
@media screen{ 电脑显示
p.test {font-family:verdana,sans-serif; font-size:14px}
}
@media print{ 打印
p.test {font-family:times,serif; font-size:10px}
}
@media tv{ 电视机
}
@media tty{ 使用固定密度字母栅格的媒介
}
@media projection{ 幻灯片
}
@media handheld{ 小的手持设备
}
@media braille{ 用于盲人用点字法触觉回馈设备
}
@media embossed{ 用于分页的盲人用点字法打印机
}
@media aural{ 用于语音和音频合成器
}
@media all{ 所有
}
@media screen,print{
p.test {font-weight:bold}
}
% 做简单适配
width:64%;
height:100px;
- 字体适配rem（font size of the root element）
rem 也可以作为宽度、高度单位
根据media，设置不同根字体
html{
position:relative;
font-size:10px; /*默认：16px*/
font-family: "微软雅黑";
}
.otherEle{
font-size:1.5em; /*15px,默认：16px*/
}
