html5/css3响应式设计

媒体查询

一、使用媒体查询

两种写法。
方式一,直接写在样式表中：

body {
	background-color: grey;
}
@media screen and (max-width: 960px) {
    body {
        background-color: red;
    }
}
@media screen and (max-width: 760px) {
    body {
        background-color: orange;
    }
}
@media screen and (max-width: 550px) {
    body {
        background-color: yellow;
    }
}
@media screen and (max-width: 320px) {
    body {
        background-color: green;
    }
}

方式二，写在css文件中：

<link rel="stylesheet" href="./white.css">
<link rel="stylesheet" media="screen and (max-width: 960px)" href="./black.css">
<link rel="stylesheet" media="screen and (max-width: 760px)" href="./white.css">
<link rel="stylesheet" media="screen and (max-width: 550px)" href="./black.css">
<link rel="stylesheet" media="screen and (max-width: 320px)" href="./white.css">

2. 写法

在CSS中通过@media指定，在html标签中通过link标签引入时通过media属性指定。
如下，表示 显示屏(screen)(也可能是打印机print) and 不超过最大宽度是960px (max-width: 960px) 应用对应的这个样式

@media screen and (max-width: 960px) {
	
}

也可以是下面这样，显示屏（screen） 纵向放置的显示屏（orientation: portrait） 最小不小于660px（min-width: 660px) 应用样式 sytle-660.css

<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 660px)" href="style-660.css" />

可以取反使用not

<link rel="stylesheet" media="not screen and (orientation: portrait) and (min-width: 660px)" href="style-660.css" />

或连接用","，表示满足其中一个条件就应用这个样式（投影仪（projection））

<link rel="stylesheet" media="not screen and (orientation: portrait) and (min-width: 660px) , projection" href="style-660.css" />

3.指定设备宽度

max-device-width: 600px，指定设备屏幕大小。

@media screen and (max-device-width: 600px) {
   body {
        background-color: yellowgreen;
    }
}

4.import按照媒体查询引入样式

如果满足screen and (max-width: 1600px)就引入一个white.css样式文件。但是这样会从网络加载样式文件（发请求，影响样式加载时间）

 @import url('white.css') screen and (max-width: 1600px);
 @media screen and (max-device-width: 1600px) {
     body {
         background-color: yellowgreen;
     }
 }

5.媒体查询属性

width:视口宽度。
height:视口高度。
device-width:渲染表面的宽度(对我们来说，就是设备屏幕的宽度)。
device-height:渲染表面的高度(对我们来说，就是设备屏幕的高度)。
orientation:检查设备处于横向还是纵向。
aspect-ratio:基于视口宽度和高度的宽高比。一个 16∶9 比例的显示屏可以这样
定义 aspect-ratio: 16/9。
device-aspect-ratio:和 aspect-ratio 类似，基于设备渲染平面宽度和高度的
宽高比。
color:每种颜色的位数。例如 min-color: 16 会检测设备是否拥有 16 位颜色。
color-index:设备的颜色索引表中的颜色数。值必须是非负整数。
monochrome:检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数，如
monochrome: 2。
resolution:用来检测屏幕或打印机的分辨率，如 min-resolution: 300dpi。还
可以接受每厘米像素点数的度量值，如 min-resolution: 118dpcm。
scan:电视机的扫描方式，值可设为 progressive(逐行扫描)或 interlace(隔
行扫描)。如 720p HD 电视(720p 的 p 即表明是逐行扫描)匹配 scan: progressive，
而 1080i HD 电视(1080i 中的 i 表明是隔行扫描)匹配 scan: interlace。
grid:用来检测输出设备是网格设备还是位图设备。

5.控制缩放

initial-scale=0.5 表示显示时，初始化缩放为0.5倍
minimum-scale=0.5 表示最小缩放0.5倍，不能继续缩放了
width=device-width 指定宽度为设备宽度
user-scalable=no 禁止缩放

<meta name="viewport" content="initial-scale=0.5,minimum-scale=0.5,width=device-width">

二、流式布局

1.通用公式

目标元素大小 * 上下文元素大小 = 结果

2.px转百分比

当使用px作为单位时，元素的大小是固定的，不能随着浏览器窗口大小变化而变化，响应式布局中不能用px作为单位。使用百分比时可以达到要求。
比如网页设计是按照1920px的屏幕设计的，网页宽度是1820px，那么这个1920px就是最基本宽度，那么此时网页宽度应该设置为 1820 / 1920 = 94.791667% ，计算百分比重要的是要确定上下文元素大小。

3.字体大小em

字体大小设置为px，字体不会随着网页的缩放而缩放，要达到字体缩放的目的，字体的单位应该使用em（发音同“M”）。浏览器默认字体大小是16px。我们可以为body设置一个标准字体，最为最上层上下文字体大小，也即百分百大小字体。
设置body字体大小的三种方式：

font-size: 100%; 
font-size: 16px; 
font-size: 1em;

比如有如下结构：

<style>
body {
	font-size: 16px; 
}
h1 {
	font-size: 2em;
}
h2 {
	font-size: 1.1875em;
}
p {
	font-size: 1.1875em;
}
p > span {
	font-size: .842105em; /* 16 / 19  这个span的上下文元素应该是p*/
}
</style>
<body>
	<h1>这个字体设置为32px</h1>
	<h2>这个字体为19px</h2>
	<p>
		这个字体设置为19px
		<span>这个字体为16px</span>
	</p>
</body>

4.响应式图片

设置响应式图片只需要将图片的max-width设置为100%即可：

max-width: 100%;

3.CSS属性

https://css-tricks.com/

1.文字阴影text-shadow

基本语法:

text-shadow: 1px 1px 1px #ccc;

第一个参数：阴影的右偏移量
第二个参数：阴影的下偏移量
第三个参数：模糊距离（即阴影从开始变淡到完全消失的距离），可以省略
最后一个参数：阴影颜色

取消文字阴影

text-shadow: none;

多重阴影

text-shadow: 5px 5px 5px #ccc, 10px 5px 1px #f1a3a3;

2.盒子阴影

box-shadow: 0 4px 5px rebeccapurple;

参数和文字阴影相同

盒子内阴影

inset 指定盒子内阴影

box-shadow: inset 0 4px 5px rebeccapurple;

也可以指定多重阴影，同文字阴影一样。

3.渐变

写法

background: linear-gradient(90deg, #fff 0%, #f1a3a3 50%, #fff 100%);

第一个参数：渐变方向，默认是从上到下的渐变，90deg表示顺时针方向旋转90度，相当于从右到左的旋转了
第二个参数（#fff 0%）：前面是颜色后面是渐变距离，至少两个参数
上面的代码的意思是：从右向左的渐变 0% 起始颜色是 #fff ，从0%到50%的颜色是#fla3a3，100%终止颜色是#fff

 background: linear-gradient(90deg, deeppink 20%, #f1a3a3 50%, #fff 80%);

上面的意思是其实颜色是deeppink，20%表示0-20%都是deeppink，从20%开始渐变到50%处的#fla3a3颜色，再渐变到80%处的#fff颜色，最后一个也是终止颜色也即从80%到100%都是这个颜色。

4.过渡transition

具体属性：

 transition-property: all;
 transition-duration: 1s;
 transition-timing-function: ease;
 transition-delay: 0;

简写属性：

transition: all 1s ease 0s;

第一个参数transition-property：要过渡的属性，all表示所有属性，也可指定单独属性background-color等
第二个参数transition-duration：过渡时间
第三个参数transition-timing-function：过渡速度（ease：轻缓、linear：线性的、ease-in：轻缓进入、ease-out、ease-in-out 或 cubic-bezier：三次bezier曲线 http://cubic-bezier.com/）
第四个参数transition-delay：开始过渡延迟时间

为不同的样式设置过渡时间

transition-property: color, background-color, box-shadow;
transition-duration: 2s, 3s, 4s;
transition-timing-function: ease;
transition-delay: 0;

5.变形

下面代码的作用是让元素缩放1.4倍：

transform: scale(1.4)

属性：

scale：用来缩放元素（放大或缩小）
translate：在屏幕上移动元素（上下左右四个方向）
rotate：按照一定角度旋转元素（单位为度deg）
skew：沿 X 和 Y 轴对元素进行斜切
matrix：允许你以像素精度来控制变形效果

scale
缩放1.4倍

transform: scale(1.4);

translate
左移20px，下移10px

transform: translate(-20px, 10px);

roate
顺时针选择45度

transform: rotate(45deg);

skew
x轴倾斜45度y轴倾斜10度
transform: skew(45deg, 10deg);
matrix
这个网站http://www.useragentman.com/matrix/可以生成matrix值。

transform-origin

变形都是有原点的，而transform-origin就是指定原点坐标
语法：transform-origin: x-axis y-axis z-axis;

3d变形

https://www.cnblogs.com/shenzikun1314/p/6390181.html

c3表单伪类选择器

input:required:选择必填表单域;
input:focus:invalid:选择当前聚焦的且含有非法输入值的表单域; 
input:focus:valid:选择当前聚焦的且含有合法输入值的表单域。

四、布局

移动设备优先：

html {

}
@media screen and (min-width: 320px) {
 
}
@media screen and (min-width: 1024px) {
  
}

桌面优先：

html {

}
@media screen and (max-width: 1024px) {

}
@media screen and (max-width: 320px) {
 
}

四、技巧

1.渐进增强

width: 25%;指定了浏览元素的宽度，width: calc(100% / 4);也可以通过这种计算方式来指定并且更加，但是有些浏览器不支持。所以写上两种，支持的浏览器已第二种为准，不支持已第一种为准。

.nav-list-item {
  color: white;
  float: left;
  /* 渐进增强 */
  width: 25%;
  width: calc(100% / 4);
}