使用@media screen解决移动web开发的多分辨率问题

最新推荐文章于 2021-08-11 17:44:37 发布

weixin_34405332

最新推荐文章于 2021-08-11 17:44:37 发布

阅读量170

点赞数

文章标签： python

原文链接：https://my.oschina.net/sallency/blog/333204

版权

2019独角兽企业重金招聘Python工程师标准>>>

本人公司做模版形式的移动智能建站系统，本人负责程序开发，但是，移动站啊，尼玛美工写的无法自适应不同分辨率手机的css实在是让吾不敢恭维啊，客户反映问题也是找我们程序，坑爹啊，我只好参与美工的css设计，做下总结：

1、引用不同的样式表

<link rel="stylesheet" media="screen and (conditions)" herf="your_css.css" />

通过设定屏幕的判断条件，调用对应的css文件。该实例多用于整页面不同风格的css调用与选取，使用该方法可能需要为一个页面制作多份个css文件。

2、执行不同的css样式属性

@media screen and (max-width:1080px){
your_css_code_will_be_valid_when_screen_width_lt_1080px
}

@media screen and (min-width:1080px){
your_css_code_will_be_valid_when_screen_width_gt_1080px
}

@media screen and (max-width:720px){
your_css_code_will_be_valid_when_screen_width_lt_1080px
}

@media screen and (min-width:720px){
your_css_code_will_be_valid_when_screen_width_gt_1080px
}

@media screen and (max-width:480px){
your_css_code_will_be_valid_when_screen_width_lt_1080px
}

@media screen and (min-width:480px){
your_css_code_will_be_valid_when_screen_width_gt_1080px
}

@media screen and (max-width:320px){
your_css_code_will_be_valid_when_screen_width_lt_1080px
}

@media screen and (min-width:320px){
your_css_code_will_be_valid_when_screen_width_gt_320px
}

max-width为当屏幕横向分辨率小于设定值时则执行

min-width为当屏幕横向分辨率大于设定值时则执行

转载于:https://my.oschina.net/sallency/blog/333204