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

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

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

相关阅读

相关如何解决Java Swing GUI编程中的布局混乱问题

Java Swing GUI编程中布局混乱是一个常见的问题，主要是因为Swing提供了多种布局管理器，每种都有其特定的用途和行为。以下是一些解决布局混乱问题的建议： 1. *

待我称王封你为后i/ 2024年11月07日 16:57/ 0 赞/ 16 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关响应不同分辨率ViewPort

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

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