媒体查询

媒体查询可以根据当前显示设备的特性(如： 视口宽度, 屏幕比例，设备显示方向)为其添加css样式， 使用媒体查询可以在不改变页面内容的情况下为特定的设备显示特定的样式。如果没有媒体查询就不能。媒体查询能够帮助我们更方便的判断当前设备特性（视口宽度等），更方便的针对视口设置合适的样式。总之：媒体查询可以让网页适应多个终端。

2.1.@media方法(写在css里).　

将不同的终端设备划分为不同的类型, 称为媒体类型

每个媒体类型都具有各自的媒体特性, 根据不同的媒体类型的媒体特性设置不同的展示风格

width / height：完全等于layout viewport (布局视口)

max-width / max-height：大于layout viewport

min-width / min-height：小于layout viewport

device-width / device-height：完全等于 ideal viewport (理想视口)

关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件

1. and  可以将多个媒体特性连接到一起, 相当于"且"的意思.

2. not  排除某个媒体特性, 相对于"非"的意思, 可以省略

3. only  指定某个特定的媒体类型, 可以省略.

以上的媒体查询意思是：

当屏幕视口大于1200px的时候显示绿色，在1200px与992px之间的时候显示红色，在992px与768px之间的时候显示黄色，在768px与480px之间的时候显示天然色，当所有条件都不满足的时候显示粉色。

细节：

写媒体查询的时候要注意书写顺序（判断最小值要从小到大，判断最大值就要从大到小)，一般使用了min-width就全部时候min-width，使用了max-width就全部时候max-width。

向上兼容：在窄屏设置的样式，默认在宽屏也会存在。

向下覆盖：宽屏设置的样式，会覆盖窄屏设置的样式。

std::vector使用简介

关于json对象的深拷贝

Babylon.js 初级教程---微软的基于webgl的H5 3D游戏引擎

html5自动填充表单

版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实将立刻删除。