本文介绍了如何使用CSS3的Media Queries进行响应式设计，详细讲解了max-device-width、max-width、min-width等属性的区别和用法，以及如何通过@media规则设置不同设备的样式。内容涵盖宽高比、设备方向和多种条件组合的使用，帮助开发者更好地理解和应用媒体查询。
现在移动端的用户和流量远远高于pc端的，做网站只做pc端已经需求不大，做两个版本又耗费资源，虽然单独做的用户体验会更好，可是也要分情况，比如服务多功能类，比较复杂的网站分开做两个版本会好很多，不过资源有限的时候，响应式网站就对于维护和开发显得很有必要。
响应式是根据设备的多媒体查询语法，由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false，宽度自动适应，分配，排版和缩放，因此可以兼容多个终端。
首先来区分一下属性media的值概念：
max-device-width：设备可视宽度，PC浏览器随意缩放时不会执行css，因为设备宽度没变化，如果是使用手机横竖屏，也不会执行css，因为手机的宽度没变化。
max-width：显示区域的宽度，比如浏览器的宽度，手机浏览器的宽度，所以宽度改变时会执行css。
在头部用link引入：
在头部link引入时，可以在link中加入media属性在限制，当满足media条件时才会映入该css文件，如下：
当屏幕的宽度大于等于400px的时候。
<link rel="stylesheet" type="text/css" href="style_01.css" media="screen and (min-width: 400px)">
最低0.47元/天 解锁文章
135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
