简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
Home > Web Front-end > H5 Tutorial > body text

HTML5实践-使用CSS3 Media Queries实现响应式设计的代码分享

黄舟
Release： 2017-03-23 15:33:08
Original
1625 people have browsed it

　　现在屏幕分辨率的范围很大，从 320px (iPhone) 到 2560px (大型显示器)，甚至更大。用户也不只是使用台式电脑访问web站点了，他使用手机、笔记本电脑、平板电脑。所以传统的设置网站宽度为固定值，已经不能满足需要了。web设计需要适应这种新要求，页面布局需要能够根据访问设备的不同分辨率自动进行调整。本教程将会向你介绍，如何使用html5和CSS3 Media Queries完成跨浏览器的响应式设计。

　　第一次运行

　　在开始之前，我们可以查看 最终demo 来查看最终效果。调整你浏览器的大小，我们可以看到页面会根据视窗的大小自动调整布局。

　　更多例子

　　你可以访问下面的地址，查看更多相关例子： WordPress themes。我设计了如下media queries： Tisa, Elemin, Suco, iTheme2, Funki, Minblr, 和 Wumblr。

　　概述

　　默认情况下，页面容器的宽度是980px，这个尺寸优化了大于1024px的分辨率。Media query用来检查 viewport 宽度，如果小于980px他会变为窄屏显示模式，页面布局将会以流动的宽度代替固定宽度。如果 viewport 小于650px，他会变为mobile显示模式，内容、侧边栏等内容会变为单独列布局方式，他们的宽度占满屏幕宽度。

 

　　HTML代码

　　在这里，我不会介绍下面html代码中的细节。下面是布局页面的主框架，我们有一个“pagewrap”的容器包装了"header", "content", "sidebar", 和 "footer"。



    

    
    


        

            blog post        


    

    
    

    

        footer
Copy after login

　　HTML5.js

　　请注意，我在demo中使用了html5标签，不过IE9之前IE浏览器不支持

,
,
,
等html5新标签。可以在html文档中添加 html5.js 文件将解决这一问题。

Copy after login

　　CSS

　　设置html5元素为块状元素

　　下面的css将会把html5的元素（article, aside, figure, header, footer 等）设置为块元素。

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}
Copy after login

　　css主体结构

　　在这里我也不会解释css文件的细节。页面主容器“pagewrap”的宽度被设置为980px。header被设置为固定高度160px。“content”的宽度为600px，靠左浮动。“sidebar”宽度设置为280px，靠右浮动。

#pagewrap {
    width: 980px;
    margin: 0 auto;
}#header {
    height: 160px;
}#content {
    width: 600px;
    float: left;
}#sidebar {
    width: 280px;
    float: right;
}#footer {
    clear: both;
}
Copy after login

　　Step 1 Demo

　　我们可以通过demo查看当前效果。这时我们还没有使用 media queries，调整浏览器宽度，页面布局也不会发生变化。

　　CSS3 Media Query

　　包含 Media Queries Javascript文件

　　IE8和之前的浏览器不支持CSS3 media queries，你可以在页面中添加css3-mediaqueries.js来解决这个问题。

Copy after login
Copy after login

　　包含 Media Queries CSS

　　创建media query所需的css，然后在页面中添加引用。

Copy after login

　　Viewport小于 980px(流动布局)

　　当viewport小于980px的时候，将会采用下面的规则：

  • pagewrap = 宽度设置为 95%

  • content = 宽度设置为 60%

  • sidebar = 宽度设置为 30%

　　tips：使用百分比（%）可以使容器变为不固定的。

@media screen and (max-width: 980px) {

    #pagewrap {
        width: 95%;
    }

    #content {
        width: 60%;
        padding: 3% 4%;
    }

    #sidebar {
        width: 30%;
    }
    #sidebar .widget {
        padding: 8% 7%;
        margin-bottom: 10px;
    }}
Copy after login

　　Viewport小于 650px(单列布局)

　　当viewport小于650px的时候，将会采用下面的规则：

  • header = 设置高度为 auto

  • searchform = 重新设置 searchform 的位置 5px top

  • main-nav = 设置位置为 static

  • site-logo = 设置位置为 static

  • site-description = 设置位置为 static

  • content = 设置宽度为 auto (这会使容器宽度变为fullwidth) ，并且摆脱浮动

  • sidebar = 设置宽度为 100%，并且摆脱浮动

@media screen and (max-width: 650px) {

    #header {
        height: auto;
    }

    #searchform {
        position: absolute;
        top: 5px;
        right: 0;
    }

    #main-nav {
        position: static;
    }

    #site-logo {
        margin: 15px 100px 5px 0;
        position: static;
    }

    #site-description {
        margin: 0 0 15px;
        position: static;
    }

    #content {
        width: auto;
        float: none;
        margin: 20px 0;
    }

    #sidebar {
        width: 100%;
        float: none;
        margin: 0;
    }}
Copy after login

　　Viewport小于 480px

　　下面得css是为了应对小于480px屏幕的情况，iphone横屏的时候就是这个宽度。

  • html = 禁用文字大小调整。 默认情况，iphone增大了字体大小，这样更便于阅读。你可以使用 -webkit-text-size-adjust: none; 来取消这种设置。

  • main-nav = 字体大小设置为 90%

@media screen and (max-width: 480px) {

    html {
        -webkit-text-size-adjust: none;
    }

    #main-nav a {
        font-size: 90%;
        padding: 10px 8px;
    }}
Copy after login

　　弹性的图片

　　为了让图片尺寸变得更为弹性，可以简单的添加 max-width:100% 和 height:auto。这种方式在IE7中正常工作，不能在IE8中工作，需要使用 width:auto\9 来解决这个问题。

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */}
Copy after login
Copy after login

　　弹性的嵌入视频

　　为了使嵌入视频也变得更加弹性，也可以使用上面的方法。但是不知道什么原因，max-width:100% 在safari浏览器中不能正常的在嵌入资源中工作。我们需要使用width:100% 来代替他。

.video embed,
.video object,
.video iframe {
    width: 100%;
    height: auto;
}
Copy after login
Copy after login

　　initial-scale Meta 标签 (iPhone)

　　默认情况下，iphone的safari浏览器会收缩页面，以适应他的屏幕。下面的语句告诉iphone的safari浏览器，使用设备宽度作为viewport的宽度，并且禁用initial-scale。

Copy after login
Copy after login

　　最终效果

　　查看最终的demo，调整浏览器的大小，查看media query 的行为。你也可以使用iPhone, iPad, 新版Blackberry, 和 Android 来查看modile版的效果。

　　总结

　　可靠的Media Queries Javascript

　　可以使用css3-mediaqueries.js来解决浏览器不支持media queries的问题。

Copy after login
Copy after login

　　CSS Media Queries

　　这一技巧可以创建自适应的设计，可以根据 viewport 的宽度重写布局的css。

@media screen and (max-width: 560px) {

    #content {
        width: auto;
        float: none;
    }

    #sidebar {
        width: 100%;
        float: none;
    }}
Copy after login

　　弹性的图片

　　使用max-width:100% 和 height:auto，可以让图片变得更加弹性。

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */}
Copy after login
Copy after login

　　弹性的内嵌视频

　　使用width:100% 和 height:auto，可以让内嵌视频变得更加弹性。

.video embed,
.video object,
.video iframe {
    width: 100%;
    height: auto;
}
Copy after login
Copy after login

　　Webkit字体大小调整

　　使用-webkit-text-size-adjust:none，在iphone上禁用字体大小调整。

html {
    -webkit-text-size-adjust: none;
}
Copy after login

　　设置iPhone Viewport 和 Initial Scale

　　下面的语句实现了在iphone中，使用meta标签设置viewport 和 inital scale。

Copy after login
Copy after login

　　好了，今天的教程到此为止。

The above is the detailed content of HTML5实践-使用CSS3 Media Queries实现响应式设计的代码分享. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
HTML5，CSS3 ，Queries
source：php.cn
Previous article：HTML5实践-在非响应式设计中如何使用ViewPort meta标签的方法介绍 Next article：HTML5实践-CSS3 Media Queries详情介绍
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact [email protected]
Latest Articles by Author
Latest Issues
Recruiting PHP development engineers Job Responsibilities: 2+ years of PHP development experience, proficient in MySQL database...
From 2022-09-08 09:31:12
0 2 694
My resume title 1. Be proficient in PHP object-oriented programming, strictly follow PSR4 specifications, ...
From 2022-07-20 16:22:34
0 0 613
[Must-read for front-end job hunting] Selected front-end development interview questions and answers_Outline Front-end development interview knowledge points outline: 1. HTML&CSS: Understanding ...
From 2017-11-13 12:02:37
1 3 1246
html5 - Why does post-css not automatically add the browser prefix to css3 attributes when using vue cli scaffolding? 1. Why is the browser prefix not automatically added to the css3 attribute when using the ...
From 2017-05-16 13:36:14
0 3 1058
android - css3 html5 怎么做native 时间、城市选择器？ 1、在移动前端微信开发中，我需要用h5实现一个类似于native选择器效果。网上找了好久都没有找到，希望知道的朋友告诉我一下，谢谢
From 2017-04-17 18:00:23
0 2 747
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！