响应式布局 订阅
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。 展开全文
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。
信息
优    点
面对不同分辨率设备灵活性强等
提出时间
2010年5月
英    文
Responsive layout
中文名
响应式布局
目    的
解决移动互联网浏览
解    释
一个网站能够兼容多个终端
响应式布局优点和缺点
优点: [1]  面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点: [1]  兼容各种设备工作量大,效率低下代码累赘,会出现隐藏无用的元素,加载时间加长其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构,会出现用户混淆的情况
收起全文
精华内容
下载资源
问答
  • 响应式布局

    2019-02-21 10:15:27
    挺不错的页面可供参考 学习 希望能帮到你们 挺不错的页面可供参考 学习
  • 下面小编就为大家带来一篇响应式布局的简单案例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
  • 今天小编就为大家分享一篇基于layui框架响应式布局的一些使用详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 因为越来越多的智能移动设备( ...响应式网络设计 ( RWD / AWD)的出现,目的是为移动设备提供更好的体验,并且整合从桌面到手机的各种屏幕尺寸和分辨率,用技术来使网页适应从小到大(现在到超大)的不同分辨率的屏幕
  • 响应式布局大全代码

    2018-07-03 14:57:14
    HTML加css加div响应式布局,包含各种网站的大概布局,适应于各种大小不同的设备。
  • 主要介绍了自适应屏幕的CSS响应式布局设计技巧总结,响应式设计是现在移动端页面开发的热门话题,需要的朋友可以参考下
  • 使用React构建响应式布局的强大工具。 WIP,将最好的想法从移植到React友好且独立于CSS的格式。 Susy移植进度 容器 基本液体容器 静态的 非中心布局 容器位置(左,中(默认),右,长度(左和右)) 断点 ...
  • 下面小编就为大家带来一篇css3media响应式布局实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 响应式布局 图片上下轮播响应式布局 图片上下轮播响应式布局 图片上下轮播响应式布局 图片上下轮播
  • 用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局 要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中使用: @media 类型 and ...
  • html5 css3响应式布局介绍及设计流程 实现响应式布局的3种手段.zip
  • 响应式布局设计是根据用户设备的屏幕分辨率来响应用户设备的一种设计。这意味着,无论用户是在移动、平板还是桌面设备上浏览 Web 页面,设计都将根据该设备的屏幕分辨率显示特定的布局,从而适当地响应设备。 该框架...
  • vw是css3出现的一个新单位,它是“view width”缩写,定义为把当前屏幕分成一百份,1vw即为屏幕的1%,与之对应的是vh,把高分成一百份,1vh即为屏幕高的1%,一般我们常用的vw单位来完成响应式开发 (2)rem介绍 rem...
  • 主要为大家详细介绍了JQuery+HTML5+CSS3制作时间轴,支持响应式布局时间轴插件,感兴趣的小伙伴们可以参考一下
  • 网页设计资料
  • 本文主要介绍一些响应式布局容易忽略但又很重要的知识点。想阅读更多优质文章请猛戳GitHub博客 二、视口 移动前端中常说的 viewport (视口)就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小,特别是可以...
  • html5 css3图片响应式布局是一款鼠标悬停图片动画显示标题的特效。
  • 下面小编就为大家带来一篇响应式布局总结(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 响应式布局实例

    2014-09-23 09:58:20
    css3中响应式布局的案例,新手们可以参考噢!
  • div css制作响应式的产品服务项目网格布局,建站套餐推荐列表布局样式代码。图片演示http://wx3.sinaimg.cn/mw690/0060lm7Tly1fwqecdj73yj30m80e00tb.jpg
  • 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天,我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。传统的开发方式是PC端开发一套页面,手机端再开发一套...

    承蒙各位小伙伴的支持,鄙人有幸入围了《CSDN 2020博客之星》的前200名,现在进入投票环节,如果我平时写的文章和分享对你有用的话,请每天点击一下这个链接,投上你们宝贵的一票吧!谢谢!❤️ 每一票都是我坚持的动力和力量! https://bss.csdn.net/m/topic/blog_star2020/detail?username=qq_23853743  

    作者:AlbertYang,软件设计师,Java工程师,前端工程师,爱阅读,爱思考,爱编程,爱自由,信奉终生学习,每天学习一点点,就是领先的开始。

    微信公众号:AlbertYang 关注我更多精彩等你来发现!

    1 什么是响应式布局?

     响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天,我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。传统的开发方式是PC端开发一套页面,手机端再开发一套页面。但是这样做非常麻烦,随着不同的终端越来越多,你需要开发多个不同版本的页面。而使用响应式布局只要开发一套就够了。EthanMarcotte在2010年5月份提出了响应式布局的概念,简而言之,就是一个网站能够兼容多个终端。

    开发方式移动web开发+PC开发响应式开发
     应用场景一般在已经有PC端的网站,开发移动站的时候,只需单独开发移动端。针对新建站的一些网站,现在要求适配移动端,所以就一套页面兼容各种终端,灵活。
     开发针对性强,开发效率高。兼容各种终端,效率低,
    适配只适配 移动设备,pad上体验相对较差。可以适配各种终端
    效率代码简洁,加载快。代码相对复杂,加载慢。

      响应式开发与移动端与PC端分别开发的区别:响应式开发只编写一套界面,通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容。移动端与PC端分别开发,通过检测视口分辨率,来判断当前访问的设备是pc端、平板、手机, 从而请求服务器,返回不同的页面。

    2 响应式开发的原理?

    响应式开发的原理是使用CSS3中的Media Query(媒体查询)针对不同宽度的设备设置不同的布局和样式,从而适配不同的设备。

    CSS3 @media 查询定义和使用:

    使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

    例如屏幕宽度小于 500 像素则修改背景颜色(background-color)为红色。

    @media screen and (max-width: 300px) {
        body {
            background-color: red;
        }
    }

    设备的划分情况为:

    • 小于768的为超小屏幕(手机)

    • 768~992之间的为小屏设备(平板)

    • 992~1200的中等屏幕(桌面显示器)

    • 大于1200的宽屏设备(大桌面显示器)

    但是我们也可以根据实际情况自己定义划分情况。

    3 响应式页面开发实战

    3.1 视频

    视频地址:https://www.bilibili.com/video/BV1mr4y1T7w5

     

    3.2 HTML

    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>响应式页面入门教程:Albert Yang</title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
            integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    </head>
    
    <body>
        <header>
            <a href="#" class="logo">AlbertYang</a>
            <ul class="navigation">
                <li><a href="#">首页</a></li>
                <li><a href="#">博客</a></li>
                <li><a href="#">联系我</a></li>
                <li><a href="#">留言板</a></li>
                <li><a href="#">关于我</a></li>
                <li><a href="#">照片墙</a></li>
            </ul>
            <div class="search">
                <input type="text" placeholder="Search">
                <i class="fa fa-search" aria-hidden="true"></i>
            </div>
        </header>
        <div class="banner">
            <div class="content">
                <h2>响应式布局</h2>
                <p>
                    响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。
                    传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够了。
                    响应式设计与自适应设计的区别:响应式开发一套界面,
                    通过检测视口分辨率,针对不同客户端在客户端做代码处理,
                    来展现不同的布局和内容;自适应需要开发多套界面,
                    通过检测视口分辨率,来判断当前访问的设备是pc端、平板、手机,
                    从而请求服务层,返回不同的页面。CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式,
                    当重置浏览器窗口大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
                </p>
                <a href="#">阅读全文</a>
            </div>
            
            <img src="1.jpg" class="image">
        </div>
    </body>
    
    </html>

    3.3 CSS

    /* 清除浏览器默认边距,
    使边框和内边距的值包含在元素的width和height内 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    header {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 100px;
        z-index: 10;
        background: #5b639c;
    }
    header .logo {
        position: relative;
        font-size: 1.5em;
        color: #fff;
        text-decoration: none;
        font-weight: 600;
    }
    header .navigation {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 10px 0;
    }
    header .navigation li {
        list-style: none;
        margin: 0 20px;
    }
    header .navigation li a {
        text-decoration: none;
        color: #fff;
        font-weight: 600;
        letter-spacing: 1px;
    }
    header .navigation li a:hover{
        color: #ffed3b;
    }
    header .search {
        position: relative;
        width: 300px;
        height: 40px;
    }
    header .search input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: #fff;
        background: transparent;
        outline: none;
        border: 1px solid #fff;
        border-radius: 5px;
        padding: 0 10px 0 45px;
    }
    header .search input::placeholder {
        color: #fff;
    }
    header .search .fa-search {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
        color: #fff;
        border-right: 1px solid #fff;
        padding-right: 10px;
    }
    .banner {
        background: #eee;
        padding: 200px 100px 100px;
        min-height: 100vh;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .banner .content {
        max-width: 1000px;
    }
    .banner .content h2 {
        font-size: 2.5em;
        color: #333;
        margin-bottom: 20px;
    }
    .banner .content p {
        font-size: 1em;
        color: #333;
    }
    .banner .content a {
        display: inline-block;
        background: #434978;
        color: #fff;
        padding: 10px 20px;
        text-decoration: none;
        font-weight: 600;
        margin-top: 20px;
    }
    .banner .image {
        max-width: 500px;
        margin-left: 50px;
    }
    /*屏幕宽度小于991px,改变布局和样式*/
    @media screen and (max-width:991px) {
        header {
            padding: 10px 20px;
            flex-direction: column;
        }
        .banner {
            padding: 150px 20px 50px;
            flex-direction: column-reverse;
        }
        .banner .image {
            max-width: 80%;
            margin-left: 0;
        }
        .banner .content h2 {
            font-size: 2em;
        }
    }
    /*屏幕宽度小于600px,改变布局和样式*/
    @media screen and (max-width:600px) {
        header .search {
            width: 100%;
        }
        .banner .image {
            margin-top: 30px;
        }
    }

    3.4 图片

    今天的学习就到这里了,由于本人能力和知识有限,如果有写的不对的地方,还请各位大佬批评指正。有什么不明白的地方欢迎给我留言,如果想继续学习提高,欢迎关注我,每天进步一点点,就是领先的开始,加油。如果觉得本文对你有帮助的话,欢迎转发,评论,点赞!!!

     

    展开全文
  • bootstrap实现导航栏的响应式布局,当在小屏幕、手机屏幕浏览时自动折叠隐藏</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content=...
  • autoresponsive-react - 实现React的自动响应式布局
  • 响应式布局
  • bootstrap响应式布局
  • 响应式布局常用的3种技术: 弹性布局,媒体查询,窗口

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 90,824
精华内容 36,329
关键字:

响应式布局