css3常见的media查询【原创】

目前市面有大量的客户要求页面即适应pc屏幕，也使用手机屏幕，即我们常说的响应式布局，如何做到一套代码同时适配多个屏幕呢，这里肯定会有一部分人说使用百分比啊，但是如果完全使用百分比的话，在大屏上看又是如此的诡异，如下图

pc端

手机端

在这里为大家推荐一种方法—使用媒体查询，简单介绍一下什么是媒体查询

官方介绍说一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如位置、宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。

他的使用方法是媒体查询包含一个可选的媒体类型和，满足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true.如一下代码

<!– link元素中的CSS媒体查询 –>

<link rel=”stylesheet” media=”(max-width: 800px)” href=”style.css” />  // 在屏幕的尺寸不超过800px时，加载style.css样式

<!– 样式表中的CSS媒体查询 –>

// 所有尺寸下的屏幕，加载类名为sidebar，设置属性为display:block,但是当屏幕小于800是，类名为sidebar的display属性变为none

<style>

.sidebar {

display: block;

}

@media (max-width: 800px) {

.sidebar {

display: none;

}

}

</style>

Media可以和逻辑操作符一起使用，包括not，and和only等，构建复杂的媒体查询

and操作符用来把多个媒体属性组合成一条媒体查询，对成链式的特征进行请求，只有当每个属性都为真时，结果才为真。

not操作符用来对一条媒体查询的结果进行取反。

only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式，这对于防止让选中的样式在老式浏览器中被应用到。

若使用了not或only操作符，必须明确指定一个媒体类型。

例子就不列举了，自行百度

提供一个学习的链接

http://www.runoob.com/cssref/css3-pr-mediaquery.html

下面讲解一下什么是媒体类型（ 注意： 媒体类型名称不区分大小写。）

我们通常使用的是screen这个类型，常用与响应式布局

最后我们一起来看看响应式网页开发中的宽度问题：

在实际开发中，通常需要设置响应式网页宽度的最大值，一旦忽略最大宽度，臃肿或零散的网页布局都会造成视觉洪灾，也就是我们常说的看起来很low。如最开始列举的例子

另外谈谈目前显示设备中的网页宽度问题，目前最为常见的宽度基本上都是：大于或等于960px的PC端（1920px、1600px、1440px、1280px、1140px、960px）、960px至640px之间的平板端（768px、640px）以及640px以下的手机端（480px、414px、375px、320px），以上宽度存在已久，且显示设备中的网页宽度会长期处于这样的状态下，在响应式网页宽度设计上，基本从这几个尺寸考虑就已经足够。也就是说在实际开发中，会根据这些屏幕尺寸和页面效果，针对的渲染页面

最后的最后，推荐一个链接，可以很好的学习到响应式布局

http://sg.yayuanzi.com/

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/24397.html

微信打赏

支付宝打赏

感谢您对作者ada的打赏，我们会更加努力！    如果您想成为作者，请点我