CSS学习--响应式布局

响应式布局

响应式网页设计的概念（responsive web design，RWD）：RWD指的是允许Web页面适应不同屏幕宽度因素等，进行布局和外观的调整的一系列实践。

媒体查询

通过媒体查询（Media queries），您可以根据各种设备特征和参数的值或者是否存在来调整您的网站或应用。

媒体特性

CSS

1. link

 /* link */
<link href="./smallScreen.css" rel="stylesheet" media="screen and (min-width: 600px)">

2. picture

/* only fit sourse of picture */
<picture>
	<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
	<img src="mdn-logo-narrow.png" alt="MDN">
</picture>

3. style

/* style */
<style media="all and (max-width: 500px)">
p {color: blue;background-color: yellow;}
</style>

4. @media

/* @media */
@media screen and (min-width: 900px) {
	article {padding: 1rem 3rem;}
}

JS

1. devicePixelRatio

//devicePixelRatio
//返回当前显示设备的物理像素分辨率与CSS像素分辨率之比。 此值也可以解释为像素大小的比率
value = window.devicePixelRatio;

2. matchMedia

//matchMedia()
//返回一个新的MediaQueryList 对象，表示指定的媒体查询 (en-US)字符串解析后的结果。
mqList = window.matchMedia(mediaQueryString)
	
//监视视口宽度，匹配宽度最小600px的
let mqRule = window.matchMedia('(min-width: 600px)');
	
/* 用来判断设备的旋转方向（横屏还是竖屏） */
var mediaQueryList = window.matchMedia("(orientation: portrait)");
if (mediaQueryList.matches) {
	/* 设备的旋转方向为纵向 portrait */
} else { 
	/* 设备的旋转方向不是纵向，也就是横向 landscape */ 
}

3. addListen

//addListen()
//向MediaQueryListener添加一个侦听器，该侦听器将运行自定义回调函数以响应媒体查询状态的更改。
var funt = (e)=>{
	if (e.matches) {
		/* the viewport is 600 pixels wide or less */
		document.body.style.backgroundColor = 'red';
	} else { 
		document.body.style.backgroundColor = 'blue'; 
	}
}
window.matchMedia('(min-width: 600px)').addListener(funt)
window.matchMedia('(min-width: 600px)').removeListener(funt)

媒体类型

描述设备的一般类别。

all(所有设备) | print(打印模式) | screen(屏幕) | speech(语言合成器)

逻辑操作符

1. and: 与
2. 逗号(,): 或。
3. only: 仅。对于防止较早的浏览器应用所选样式很有用。 当不使用only时，旧版本的浏览器会将screen and (max-width: 500px)简单地解释为screen，忽略查询的其余部分，并将其样式应用于所有屏幕。
4. not: 非。但是，not关键字不能用于否定单个媒体功能表达式，而只能用于否定整个媒体查询。

使用媒体查询增强网站的可访问性

1. 减少动画

.animation {
	-webkit-animation: vibrate 0.3s linear infinite both;
	animation: vibrate 0.3s linear infinite both;
}
/* 移除动画 */
/* prefers-reduced-motion: [no-preference | reduce] */
/* no-preference: 指示用户未使系统知道首选项。 */
/* reduce: 表示用户已通知系统他们希望使用一种界面 */
@media (prefers-reduced-motion: reduce) {
	.animation {animation: none;}
}

<div class="animation">animated box</div>

2. 高对比度

/* -ms-high-contrast: [active | black-on-white] */
/* active:具有任何颜色变化的高对比度模式,white-on-black:具有黑白颜色变化的高对比度模式 */
@media screen and (-ms-high-contrast: active) {
	/* All high contrast styling rules */
}
@media screen and (-ms-high-contrast: black-on-white) {
	div { background-image: url('image-bw.png'); }
}
@media screen and (-ms-high-contrast: white-on-black) {
	div { background-image: url('image-wb.png'); }
}

灵活布局

1. 宽度width: calc(100% / 4);width: 25vw;
2. 多列布局文本column-count: 3;column-width: 10em;
3. flex盒子flex: 1;
4. grid和flexdisplay: grid;grid-template-columns: repeat(3,1fr);

响应式图像

基本来说，你可以用一张有着所需最大尺寸的图像。

1. max-width这种方式有显然的弊端。图像有可能会显示得比它的原始尺寸小很多，以至于浪费带宽——一个移动端用户会下载几倍于他们在浏览器窗口中实际看到的大小的图像。此外，你可能不想在移动端和桌面端有相同的图像宽高比例。

img { max-width: 100%: }

2. srcset 和 sizes

<!--srcset="filename img-width" -->
<!--sizes="mediaQuery div-width of img " -->
<img 
	srcset="elva-fairy-320w.jpg 320w,elva-fairy-480w.jpg 480w,elva-fairy-800w.jpg 800w" 
	sizes="(max-width: 320px) 280px,(max-width: 480px) 440px,800px" 
	src="elva-fairy-800w.jpg" 
	alt="Elva dressed as a fairy"
>

3. picture

<!--sourse切换不同资源，如果浏览器不支持<picture>则显示<img> -->
<picture>
	<source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
	<source media="(min-width: 800px)" srcset="elva-800w.jpg">
	<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"></picture>

响应式排版

1. @media

   @media (min-width: 1200px) {h1 { font-size: 4rem; }}
   

2. 视口单位

   h1 { font-size: 4vw; }
   

视口元标签

<!-- 将视口宽度设定为设备的宽度，将文档放大到其预期大小的100%， -->
<meta name="viewport" content="width=device-width,initial-scale=1">

name="viewport"时的content可用设定

• initial-scale：设定了页面的初始缩放，我们设定为1。
• height：特别为视口设定一个高度。
• width：特别为视口设定一个宽度。
• minimum-scale：设定最小缩放级别。
• maximum-scale：设定最大缩放级别。
• user-scalable：如果设为no的话阻止缩放。