CSS3 @media 属性与min-width与max-width在自适应网站建设中的作用

时间:2018-08-07 14:00:59 点击: 0 评论:0 作者:小纯洁 来源:1299R

CSS3 @media 属性与min-width与max-width在自适应网站建设中的作用

媒体查询(media queries)是响应式设计(Responsive Web Design简称RWD)必不可少的一部分,媒体查询的特性极大方便了自适应的前台页面布局,但是往往让新接触的朋友产生很多迷惑,搞懂了这两个属性,可以让你在网站建设web设计中事半功倍。

min-width和max-width是媒体查询的两个关键词,最初接触的时候,我也感觉这两个关键词特别绕,但是仔细理解之后,就很明了了。

CSS3 @media 属性与min-width与max-width在自适应网站建设中的作用

简单举例说明,mix和max英文单词分别为最小和最大,min-width即最小宽度,@media (min-width : 1200px)则表示最小宽度为1200px,也就是大于等于1200px,同理@media (max-width : 1200px)则表示最大宽度为1200px,也就是小于等于1200px,这样是不是就可以理解了?

再来个具体的实例:

@media (max-width : 1200px){p {color:#000000;}}

编译:如果屏幕宽度大于等于1200像素,则p元素执行{color:#000000;}

@media (max-width : 1200px) and (max-width : 1400px){p {color:#000000;}}

编译:如果屏幕宽度大于等于1200像素而且小于等于1400像素,则p元素执行{color:#000000;},是不是很简单?


当然,只理解到这种程度还是不够的,还不能完全的运用好@media,在web设计尤其是web前端开发中,CSS的优先级大家应该都了解,其中越往下优先级越高,这就决定了min-width和max-width的使用方法,例如:

1.body {background-color: gray; }

2.@media screen and ( max-width: 960px ) {body { background-color: red; }}

3.@media screen and ( max-width: 768px ) {body { background-color: orange; }}
4.@media screen and ( max-width: 550px ) {body { background-color: yellow; }}

5.@media screen and ( max-width: 320px ) {body { background-color: green; }}

编译完为:

1.显示灰色背景;
2.当宽度小于等于960像素时,显示红色背景;
3.当宽度小于等于768像素时,显示橙色背景;

4.当宽度小于等于550像素时,显示黄色背景;

5.当宽度小于等于320像素时,显示绿色背景;

如果窗体宽度从小于320像素开始变大,直到大于960像素时,CSS从下往上依次执行,背景颜色依次显示绿-黄-橙-红-灰,但是如果CSS顺序写错:

1.body {background-color: gray; }

2.@media screen and ( max-width: 960px ) {body { background-color: red; }}

3.@media screen and ( max-width: 768px ) {body { background-color: orange; }}

4.@media screen and ( max-width: 320px ) {body { background-color: green; }}

5.@media screen and ( max-width: 550px ) {body { background-color: yellow; }}

则编译为:

1.显示灰色背景;
2.当宽度小于等于960像素时,显示红色背景;
3.当宽度小于等于768像素时,显示橙色背景;

4.当宽度小于等于320像素时,显示绿色背景;

5.当宽度小于等于550像素时,显示黄色背景;

如果窗体宽度从小于320像素开始变大,CSS从下往上依次执行,直到550像素时都会显示为黄色,从而将直接跳过@media screen and ( max-width: 320px ) {body { background-color: green; }},所以总结一下使用规律,max-width在css中数值从大到小,相反min-width则是从小到大。

熟练使用@media和min-width max-width可快速定义对象的自适应属性,对于各种设备都有很好的体验,在网站建设网站开发中有很重要的作用,希望大家都能熟练灵活运用。

更多济南网站建设SEO技巧,欢迎评论投稿交流!

评论

"CSS3 @media 属性与min-width与max-width在自适应网站建设中的作用"的0条评论

点击刷新