HTML5零基础学习日记

一、媒体查询。媒体查询可以根据不同的视口大小调整内容的布局。 视口是指浏览器中，用户可见的网页内容。 视口会随访问网站的设备不同而改变。

注意：只有当媒体类型与所使用的设备的类型匹配时，媒体查询中定义的 CSS 才生效。

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

@media (max-width: 100px) { /* CSS Rules */ }

二、图片的自适应 

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

设置 max-width 值为 100% 可确保图片不超出父容器的范围；

设置 height 属性为 auto 可以保持图片的原始宽高比。