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

深藏阁楼爱情的钟 2022-05-14 05:21 503阅读 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 条评论，503人围观）

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

相关阅读

相关 Java Swing GUI设计：组件布局混乱问题实例

Java Swing 是一个用于构建图形用户界面（GUI）的库。在使用 Swing进行 GUI 设计时，组件布局是一个常见的问题。如果布局管理不当，可能会导致组件显示混乱、界面

以你之姓@/ 2024年11月02日 01:21/ 0 赞/ 42 阅读

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

Java Swing提供了多种布局管理器来帮助开发者管理组件的布局。如果你遇到了布局混乱的问题，可以尝试以下方法来解决： 1. **选择合适的布局管理器**： - `Flow

桃扇骨/ 2024年11月01日 09:18/ 0 赞/ 17 阅读

相关解决Java Swing UI布局混乱的问题

在Java Swing UI中，如果布局混乱，可能是因为以下几种情况： 1. 布局管理器（LayoutManager）未正确设置：Swing应用通常使用DefaultLayo

港控/mmm°/ 2024年10月24日 15:33/ 0 赞/ 13 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关响应不同分辨率ViewPort

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

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