`

Responsive Web Design(自响应式网页设计)

    博客分类:
  • css
阅读更多
Responsive Web Design(自响应式网页设计)

一、认识:media

从 CSS2.1 那会,样式表就可以使用 media type 进行样式的判断了。那时是这么写的:
<link rel="stylesheet" type="text/css" href="core.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

如果当前 media 是浏览器,则加载 core.css。
如果当前 media 是打印机,则加载 print.css。

感谢 W3C 在 CSS3 中对 media 进行了扩展:可以在 media 中增加条件。
例如:
<link rel="stylesheet" type="text/css" href="shetland.css" 
      media="screen and (max-device-width: 480px)" />

或:
@import url("shetland.css") screen and (max-device-width: 480px);

解释:
当 media 为 screen(浏览器,平板电脑,手机),且宽度小于 480px 时,加载 shetland.css


当然,
它还可以将颗粒度细化到符合哪些条件,则应用那个样式类:
@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}


例子一:
<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: lightblue;
}

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
</style>
</head>
<body>
    <h1>调整浏览器的宽度,观察效果!</h1>
    <p>
        当且仅当:media 类型为 screen(浏览器,平板,手机),
        且 viewport 的宽度大于等于 480px 时,media query 中的样式才会起作用。
    </p>
</body>
</html>


例子2:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_mediaquery

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
    font-family: "Lucida Sans", Verdana, sans-serif;
}

.main img {
    width: 100%;
}

h1{
    font-size: 1.625em;
}

h2{
    font-size: 1.375em;
}

.header {
    padding: 1.0121457489878542510121457489879%;
    background-color: #f1f1f1;
    border: 1px solid #e9e9e9;
}

.menuitem {
    margin: 4.310344827586206896551724137931%;
    margin-left: 0;
    margin-top: 0;
    padding: 4.310344827586206896551724137931%;
    border-bottom: 1px solid #e9e9e9;
    cursor: pointer;
}

.main {
    padding: 2.0661157024793388429752066115702%;
}

.right {
    padding: 4.310344827586206896551724137931%;
    background-color: #CDF0F6;
}

.footer {
    padding: 1.0121457489878542510121457489879%;
    text-align: center;
    background-color: #f1f1f1;
    border: 1px solid #e9e9e9;
    font-size: 0.625em;
}

.gridcontainer {
    width: 100%;
}

.gridwrapper {
    overflow: hidden;
}

.gridbox {
    margin-bottom: 2.0242914979757085020242914979757%;
    margin-right: 2.0242914979757085020242914979757%;
    float: left;
}

.gridheader {
    width: 100%;
}

.gridmenu {
    width: 23.481781376518218623481781376518%;
}

.gridmain {
    width: 48.987854251012145748987854251012%;
}

.gridright {
    width: 23.481781376518218623481781376518%;
    margin-right: 0;
}

.gridfooter {
    width: 100%;
    margin-bottom: 0;
}

@media only screen and (max-width: 500px) {
    .gridmenu {
        width: 100%;
    }

    .menuitem {
        margin: 1.0121457489878542510121457489879%;
        padding: 1.0121457489878542510121457489879%;
    }

    .gridmain {
        width: 100%;
    }

    .main {
        padding: 1.0121457489878542510121457489879%;
    }

    .gridright {
        width: 100%;
    }

    .right {
        padding: 1.0121457489878542510121457489879%;
    }

    .gridbox {
        margin-right: 0;
        float: left;
    }
}

</style>
</head>
<body>
<div class="gridcontainer">
    <div class="gridwrapper">
        <div class="gridbox gridheader">
            <div class="header">
                <h1>The Pulpit Rock</h1>
            </div>
        </div>
        <div class="gridbox gridmenu">
            <div class="menuitem">The Drive</div>
            <div class="menuitem">The Walk</div>
            <div class="menuitem">The Return</div>
            <div class="menuitem">The End</div>
        </div>
        <div class="gridbox gridmain">
            <div class="main">
<h1>The Walk</h1>
<p>The walk to the Pulpit Rock will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
<img src="pulpitrock.jpg" alt="Pulpit rock" width="" height="">

            </div>
        </div>
        <div class="gridbox gridright">
            <div class="right">
<h2>What?</h2>
<p>The Pulpit Rock is a part of a mountain that looks like a pulpit.</p>
<h2>Where?</h2>
<p>The Pulpit Rock is in Norway</p>
<h2>Price?</h2>
<p>The walk is free!</p>
            </div>
        </div>
        <div class="gridbox gridfooter">
            <div class="footer">
<p>This web page is a part of a demonstration of fluid web design made by www.w3schools.com. Resize the browser window to see the content response to the resizing.</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>







应用:
http://lixh1986.iteye.com/blog/2321482





引用请注明,
原文出处:http://lixh1986.iteye.com/blog/2376864





参考:
https://alistapart.com/article/responsive-web-design






-
  • 大小: 462.8 KB
  • 大小: 350.2 KB
分享到:
评论

相关推荐

    Responsive Web Design 英文

    响应式Web设计是一种现代网页设计方法,旨在确保网站...通过学习"Responsive Web Design"这本书,读者将获得创建现代、适应性强的网页的实用技巧,并理解如何通过响应式设计提升用户体验,适应不断变化的数字设备环境。

    响应式web设计-HTML5和CSS3实战_Responsive Web Design with HTML5 and CSS3 code 源代码

    响应式Web设计是一种现代网页开发方法,旨在提供跨设备、跨屏幕尺寸的无缝用户体验。它主要依赖于HTML5和CSS3的新特性来实现,确保网页在桌面电脑、平板电脑、智能手机和其他不同设备上都能自适应地展示内容。在这个...

    Responsive Web Design with HTML5 and CSS3 [eBook]

    本书《Responsive Web Design with HTML5 and CSS3 [eBook]》主要探讨了响应式网页设计的概念、方法和最佳实践。在当今这个多设备并存的时代,网站设计师和开发者面临着如何让网站在不同尺寸和分辨率的设备上提供...

    Responsive Web Design with HTML5 and CSS3, 2nd Edition

    响应式网页设计是一种现代网页开发方法,旨在确保网站在各种设备上都能提供良好的用户体验,无论设备的屏幕尺寸、分辨率或方向如何。随着HTML5和CSS3的出现,开发者拥有了更多的工具来创建适应性强、功能丰富的响应...

    document of Responsive Web Design

    响应式网页设计(Responsive Web Design,简称RWD)是一种现代网页设计方法,旨在提供一个能够适应不同设备屏幕尺寸、分辨率和方向的网站界面。这种设计技术的出现是为了解决传统固定宽度网页在移动设备上显示不佳的...

    Dive_into_Responsive_Web_Design(响应式设计电子书)

    响应式网页设计(Responsive Web Design, RWD)是一种让网页内容在不同设备、不同屏幕尺寸下都能良好显示的设计理念和技术。通过使用灵活的布局、可伸缩的图片和其他智慧型设计技术,RWD使得同一个网站能够在桌面...

    Responsive Web Design with HTML5 and CSS3.pdf 高清下载

    **响应式网页设计(Responsive Web Design, RWD)** - **定义**:响应式网页设计是一种使网站在不同设备(如桌面、平板、手机等)上都能良好显示的设计方法。它依赖于灵活的布局、图片以及CSS媒体查询。 - **目标...

    【Web网页设计制作-毕业设计期末大作业源码】(FZY014)倾情奉献绿色响应式手机网站模板.zip

    响应式网页设计(Responsive Web Design,简称RWD)的核心在于CSS3的媒体查询(Media Queries)技术。通过设置不同断点,设计师可以根据屏幕尺寸和设备特性来调整布局、图片大小、字体等元素,确保页面在各种分辨率...

    Responsive Web Design By Example

    响应式网页设计是现代网页设计领域中非常重要的一个分支,它主要解决的问题是如何让网站在不同尺寸的设备上都能够提供良好的浏览体验。在当今智能手机、平板电脑和不同尺寸的屏幕无处不在的时代,响应式设计的重要性...

    Beginning Responsive Web Design with HTML5 and CSS3

    **响应式网页设计**(Responsive Web Design, RWD)是一种网页设计的方法论,它旨在使网站在多种设备上都能提供优秀的用户体验。通过这种优化方式,开发者能够确保网站无论是在桌面电脑、平板电脑还是智能手机上都能够...

    什么是响应式网页设计?.doc

    响应式网页设计(Responsive Web Design)是指网站页面能够自动适应不同屏幕分辨率和设备环境的设计理念。这种设计方法强调根据用户行为和设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整,确保...

    Packt.Responsive Web Design with AngularJS.2014

    #### 一、响应式网页设计(Responsive Web Design,RWD)概述 **响应式网页设计**是一种网页设计与开发的方法论,旨在使网站能够根据用户的设备环境(屏幕尺寸、平台、方向等)进行灵活布局和展示。这种设计方式...

Global site tag (gtag.js) - Google Analytics