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

痛定思痛。 2021-09-17 08:48 399阅读 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 条评论，399人围观）

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

相关阅读

相关自适应布局

常见自适应布局有两种：左侧固定右侧自适应、左右两侧固定中间自适应左侧固定，右侧自适应 1、子元素 float:left // html部分 <div c

梦里梦外;/ 2023年08月17日 17:39/ 0 赞/ 136 阅读

相关自适应网页

[http://www.ruanyifeng.com/blog/2012/05/responsive\_web\_design.html][http_www.ruanyifen

短命女/ 2022年09月21日 13:13/ 0 赞/ 188 阅读

相关 html5如何利用rem实现自适应布局

先来简单了解rem是什么：rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。所以我们只要定

缺乏、安全感/ 2022年06月06日 06:25/ 0 赞/ 397 阅读

相关编写自适应网页——media

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

女爷i/ 2022年06月03日 09:53/ 0 赞/ 227 阅读

相关如何实现自适应布局的？

最近为了能够做出自适应的页面找了很多资料，大致较为有用的两类 1.根据屏幕大小不同引入不同的css样式文件 <link href="css/css-pc.css"

亦凉/ 2022年05月31日 03:09/ 0 赞/ 323 阅读

相关利用@media与@media screen进行响应式布局 ( 赞）

原文出处：[http://www.511yj.com/media-media-screen.html （原文更易阅读）][http_www.511yj.com_media-me

野性酷女/ 2022年05月15日 04:19/ 0 赞/ 279 阅读

相关 @media screen实现屏幕自适应内容详解

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

以你之姓@/ 2022年01月31日 11:17/ 0 赞/ 600 阅读

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

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

痛定思痛。/ 2021年09月17日 08:48/ 0 赞/ 400 阅读

相关使用CSS3 Media Queries实现网页自适应

原文来源：[http://webdesignerwall.com][http_webdesignerwall.com] 翻译：[http://xinyo.org][http_

叁歲伎倆/ 2021年09月15日 06:56/ 0 赞/ 493 阅读

相关 html5如何利用rem实现自适应布局

先来简单了解`rem`是什么：`rem（font size of the root element）`是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。所以我

向右看齐/ 2021年06月26日 16:06/ 0 赞/ 563 阅读