欢迎光临!中国网页设计提供最新的免费网页制作教程,网页设计技术,HTML5+DIV3...中国站长必上的网站。
加入收藏设为首页广告合作
您当前位置:网站首页 >> 网页制作 >> 网页布局 >> 十天学会响应式布局五:响应式设计的步骤
  • 网页配色
  • 网页布局
  • 设计欣赏
  • 网页设计理论
  • HTML/HTML5
  • CSS
  • Javascript
  • Dreamweaver
  • FLASH
  • 十天学会响应式布局五:响应式设计的步骤

    来源:掌心 Be For Web 浏览:3122

    内容提要:文章讲解了响应式设计的步骤和注意事项,并通过实例演示了响应式布局的设计过程。

    一、响应式设计的步骤

    1. 设置 Meta 标签

    大多数移动浏览器将html页面放大为宽的视图(viewport)以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器,使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    (user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。 )

    2. 通过媒介查询来设置样式 Media Queries

    Media Queries 是响应式设计的核心。
    它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px,那么可以这样写:

    @media screen and (max-width: 980px) {
    #head { … }
    #content { … }
    #footer { … }
    }

    这里的样式就会覆盖上面已经定义好的样式。

    3.设置多种试图宽度

    假如我们要设定兼容 iPad 和 iphone 的视图,那么可以这样设置:

    /** iPad **/
    @media only screen and (min-width: 768px) and (max-width: 1024px) {}
    /** iPhone **/
    @media only screen and (min-width: 320px) and (max-width: 767px) {}

    恩,差不多就这样的一个原理。

    注意:

    1. 宽度需要使用百分比

    例如这样:
    #head { width: 100% }
    #content { width: 50%; }

    2. 处理图片缩放的方法

    简单的解决方法可以使用百分比,但这样不友好,会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了,就缩小。假如图片小了,就原尺寸输出。
    img { width: auto; max-width: 100%; }
    用::before和::after伪元素 +content 属性来动态显示一些内容或者做其它很酷的事情,在 css3 中,任何元素都可以使用 content 属性了,这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能: HTML结构:

    <img src="image.jpg" alt="折腾响应式布局设计"
    data-src-600px="image-600px.jpg"
    data-src-800px="image-800px.jpg"
    alt="">

    CSS 控制:

    @media (min-device-width:600px) {
    img[data-src-600px] {
    content: attr(data-src-600px, url);
    }
    }

    @media (min-device-width:800px) {
    img[data-src-800px] {
    content: attr(data-src-800px, url);
    }
    }

    3. 其他属性

    例如 pre ,iframe,video 等,都需要和img一样控制好宽度。对于table,建议不要增加 padding 属性,低分辨率下使用内容居中:

    table th, table td { padding: 0; text-align: center; }

    二、打造布局结构

    我们可以监测页面布局随着不同的浏览环境而产生的变化,如果它们变的过窄过短或是过宽过长,则通过一个子级样式表来继承主样式表的设定,并专门针对某些布局结构进行样式覆写。我们来看下代码示例:

    /* Default styles that will carry to the child style sheet */
    html,body{
       background...
       font...
       color...
    }
    h1,h2,h3{}
    p, blockquote, pre, code, ol, ul{}
    /* Structural elements */
    #wrapper{
        width: 80%;
        margin: 0 auto;
        background: #fff;
        padding: 20px;
    }
    #content{
        width: 54%;
        float: left;
        margin-right: 3%;
    }
    #sidebar-left{
        width: 20%;
        float: left;
        margin-right: 3%;
    }
    #sidebar-right{
        width: 20%;
        float: left;
    }

    下面的代码可以放在子级样式表Mobile.css中,专门针对移动设备进行样式覆写:

    #wrapper{
        width: 90%;
    }
    #content{
        width: 100%;
    }
    #sidebar-left{
        width: 100%;
        clear: both;
        /* Additional styling for our new layout */
        border-top: 1px solid #ccc;
        margin-top: 20px;
    }
    #sidebar-right{
        width: 100%;
        clear: both;
        /* Additional styling for our new layout */
        border-top: 1px solid #ccc;
        margin-top: 20px;
    }

    页面视觉效果如下图所示:

    十天学会响应式布局五:响应式设计的步骤

    图中上半部分是大屏幕设备所显示的完整页面,下面的则是该页面在小屏幕设备的呈现方式。

    Ethan的文章中的“Meet the media query”部分有更多的范例及解释。更有效率的做法是,将多个media queries整合在一个样式表文件中

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
    /* Styles */
    }
    /* Smartphones (landscape) ----------- */
    @media only screen
    and (min-width : 321px) {
    /* Styles */
    }
    /* Smartphones (portrait) ----------- */
    @media only screen
    and (max-width : 320px) {
    /* Styles */
    }

    这里有一个免费模板:http://stuffandnonsense.co.uk/projects/rock-hammer/
    查看演示:http://malarkey.github.io/Rock-Hammer/#panel-forms-hidden

    发表评论 共有0人对本文发表评论
    网名:
    评论:
    验证:
    (网友评论仅供表达个人看法,并不表明本站同意其观点或证实其描述)
    联系我们 - 网站调查 - 免责声明 - 站长简介 - 站点综合查询 - 课件习题 - 友情链接 - 站长统计