响应式网页适应原则

媒体查询

下面是一个媒体查询的例子，当设备宽度小于或等于 200px 时返回内容：

@media(min-width:200px) {
	/*CSS rules*/
}

先写一个媒体查询的范围(条件),再码css的规则.

图片自适应

图片适应设备的大小改变,下面举例

img {
  max-width: 100%;
  height: auto;
}

图片的宽度不超出父容器的范围,高度就是原始宽高比.

针对高分辨率屏幕应使用视网膜图片

随着联网设备的增加,设备不仅在大小,颜色上差别很大,而且分辨率也大不相同. 由于“视网膜显示屏”和“非视网膜显示屏”显示器之间像素密度的不同，某些未考虑高分辨率显示器的图像在高分辨率显示器上渲染时，可能因出现“像素化”而不够清晰。
所以图片在高分辨率的屏幕上显示时会做些处理
假设图片的原始大小是400px*400px

  img { height: 200px; width: 200px; }

那么就可以把图片的宽高值设为一半,注意是值哦,不能设为50%

视窗单位

• vw：如 20vw 的意思是视窗宽度的 20%。
• vh： 如 2vh 的意思是视窗高度的 2%。
• vmin： 如 80vmin 的意思是视窗的高度和宽度中较小一个的 80%。
• vmax： 如 100vmax 的意思是视窗的高度和宽度中较大一个的 100%。
  举例
  body 标签的宽度为视窗宽度的 30%。

body { width: 30vw; }

总结

媒体查询是很有用的,栅格布局源代码就用到了