响应式布局

响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

媒体查询

为了能完成响应一定会用到媒体查询

媒体查询是CSS3新语法

使用媒体查询，可以针对不同的媒体类型定义不同的样式

可以针对不同的屏幕尺寸设置不同的样式

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

目前针对很多手机、平板等设备都用到的媒体查询

max-width与min-width

单独把这俩属性拎出来，没什么可说的，就是字面上的意思。

max-width：设置元素的最大宽度。该属性值会对元素的宽度设置一个最高限制。因此，元素可以比指定值窄，但不能比起宽。

min-width：设置元素的最小宽度。该属性值会对元素的宽度设置一个最小限制。因此，元素可以比指定值宽，但不能比其窄。不允许指定负值。

@media(min-width:330px){…}

指的是 width大于或等于min-width时，采用{…}样式。

能直接转过弯来的，下面不用看了，可以退出，干点别的了。

没转过弯来的，也不要紧。接着往下看。

先返回上面，看min-width的解释：设置元素的最小宽度。该属性值会对元素的宽度设置一个最小限制。因此，元素可以比指定值宽，但不能比其窄。

也就是说我的值可以比你大，但不能比你小。

所以这处理过程翻译过来就是：视口为340px时，大于330px，这条规则为true，执行CSS样式；而如果为320px，小于330px，这条规则为false，返回false的媒体查询规则会直接被浏览器过滤掉，不会渲染这条规则中的CSS样式

同理：@media(max-width:330px){…}

指的是width小于等于max-width时，采用{…}样式

所以，需要在width大于1280px时，采取{…}样式时，应该这样

@medai{min-width:1280px}{…}

原文链接：https://blog.csdn.net/Cheng_XZ/article/details/108052597