通过@media解决不同分辨率，布局混乱问题

深藏阁楼爱情的钟 2022-05-14 05:21 477阅读 0赞

利用@media screen实现网页布局的自适应

优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值

--------------------

1280分辨率以上（大于1200px）

@media screen and (min-width:1200px){
        #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px}
    }

1100分辨率（大于960px，小于1199px）

@media screen and (min-width: 960px) and (max-width: 1199px) {
        #page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px}
    }

880分辨率（大于768px，小于959px）

@media screen and (min-width: 768px) and (max-width: 959px) {
        #page{ width: 900px; }#content,.div1{width: 620px;}#secondary{width:220px}select{max-width:180px}
    }

720分辨率（大于480px，小于767px）

@media only screen and (min-width: 480px) and (max-width: 767px){
        #page{ width: 450px; }#content,.div1{width: 420px;position: relative; }#secondary{display:none}#access{width: 450px; }#access a {padding-right:5px}#access a img{display:none}#rss{display:none}#branding #s{display:none}
    }

440分辨率以下（小于479px）

@media only screen and (max-width: 479px) {
        #page{ width: 300px; }#content,.div1{width: 300px;}#secondary{display:none}#access{width: 330px;} #access a {padding-right:10px;padding-left:10px}#access a img{display:none}#rss{display:none}#branding #s{display:none}#access ul ul a{width:100px}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，477人围观）

还没有评论，来说两句吧...

相关阅读

相关如何解决Java Swing界面布局混乱问题

Java Swing界面布局混乱通常是由以下几个原因造成的： 1. 空间管理不当：组件的大小不合适，或者没有正确地排列。 2. 布局模式选择错误：常用的布局有FlowLay

﹏ヽ暗。殇╰゛Y/ 2024年09月16日 06:03/ 0 赞/ 17 阅读

相关 css判断不同分辨率显示不同宽度布局实现自适应宽度&css3 @media样式的使用

css判断不同分辨率显示不同宽度布局实现自适应宽度即 css3 @media样式的使用转自：脚本之家【css判断不同分辨率显示不同宽度布局实现自适应宽度】 [http

本是古典何须时尚/ 2022年05月26日 04:28/ 0 赞/ 160 阅读

相关通过@media解决不同分辨率，布局混乱问题

利用@media screen实现网页布局的自适应优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@media screen属性,根据浏览

深藏阁楼爱情的钟/ 2022年05月14日 05:21/ 0 赞/ 478 阅读

相关 Winform下调整缩放与布局以及分辨率下界面混乱解决办法

Winform下调整缩放与布局以及分辨率下界面混乱解决办法文章目录 Winform下调整缩放与布局以及分辨率下界面混乱解决办法前言解决

╰半夏微凉°/ 2022年03月24日 15:24/ 0 赞/ 4253 阅读

相关隐藏表格的行显示后布局混乱的问题

1.在做项目时用了一个表格做注册，不同类型人的身份填写内容不同，所以有些内容会隐藏。 2.原本隐藏了表格的一行(改行置为display:none)，但是在显示表格(disp

我就是我/ 2022年03月18日 08:22/ 0 赞/ 357 阅读

相关响应式布局——@media详解

语法： @media：[<media\_query\_list>][media_query_list] <media\_query\_list>：\[[<media\_qu

曾经终败给现在/ 2021年09月27日 23:46/ 0 赞/ 511 阅读

相关响应式布局——@media详解

语法： @media：[<media\_query\_list>][media_query_list] <media\_query\_list>：\[[<media\_qu

小灰灰/ 2021年09月27日 23:46/ 0 赞/ 626 阅读

相关响应式布局——@media详解

语法： @media：[<media\_query\_list>][media_query_list] <media\_query\_list>：\[[<media\_qu

本是古典何须时尚/ 2021年09月26日 03:22/ 0 赞/ 1069 阅读

相关 bloc+rxdart解决代码混乱大问题

文章结构： \--- bloc+rxdart的几大优点 \--- 示例代码简单实现调用网络接口，然后刷新页面显示 \--- bloc+rxdart实现原理 \--- b

Bertha 。/ 2021年09月20日 00:38/ 0 赞/ 194 阅读

相关响应不同分辨率ViewPort

在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的[viewport了][viewport]，只有明白了viewport的概念以及弄清楚了跟viewport有关的

ゝ一世哀愁。/ 2021年09月12日 01:32/ 0 赞/ 271 阅读