精华内容
下载资源
问答
  • html5 css3响应式布局介绍及设计流程 实现响应式布局的3种手段.zip
  • 实现响应式布局

    千次阅读 2014-03-18 17:39:15
    响应式网页设计现在无疑是一件大事情。如果你还不了解响应式设计,可以看看我最近发表的响应式站点列表(译者注:可以好好看看示例中的网站在不同分辨率下的展现方式)。对新手来说,响应式设计可能有一点复杂,但是...

      响应式网页设计现在无疑是一件大事情。如果你还不了解响应式设计,可以看看我最近发表的响应式站点列表(译者注:可以好好看看示例中的网站在不同分辨率下的展现方式)。对新手来说,响应式设计可能有一点复杂,但是事实上比你想象的简单。为了帮助你迅速的了解响应式设计,我起草了一篇快速教程。你可以在3个步骤中学习到响应式设计和媒介查询(Media Queries)的基本原理(假定你了解基本的CSS知识)。
            第一步:Meta标签(查看演示

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

    <meta name="viewport" content="width=device-width, initial-scale=1.0">  

    IE8或者更早的浏览器并不支持Media Query。你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。

    <!--[if lt IE 9]>  
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>  
    <![endif]--> 

            第二步:HTML结构
            在这个例子里,我有一个包括头部、内容、侧边栏和页脚的基本页面布局。头部有固定的高度180像素,内容容器是600像素而侧边栏是300像素。

     

            第三步:媒介查询-Media Queries
            CSS3 Media Query-媒介查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。
            当视图宽度为小于等于980像素时,如下规则将会生效。基本上,我会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。

     

            然后为小于等于700像素的视图指定#content和#sidebar的宽度为自适应并且清除浮动,使得这些容器按全宽度显示。

     

            对于小于等于480像素(手机屏幕)的情况,将#header元素的高度设置为自适应,将h1的字体大小修改为24像素并隐藏侧边栏。

     

            你可以根据你的喜好添加足够多的媒介查询。我在示例中仅仅展示了3个媒介查询。媒介查询的目的在于为指定的视图宽度指定不同的CSS规则,来实现不同的布局。媒介查询可以写在同一个或者单独的样式表中。

    展开全文
  • 用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局 要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中使用: @media 类型 and ...
  • 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天,我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。传统的开发方式是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 图片

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

     

    展开全文
  • display:flex实现响应式布局 display:flex实现响应式布局 &lt;body&gt; &lt;div class="demo"&gt; &lt;div class="item"&gt;&lt;/div&gt; &lt;div ...

    display:flex实现响应式布局

    display:flex实现响应式布局

    <body>
    
        <div class="demo">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    
    </body>
    <style>
    
    
    .demo{
    	width: 100%;
    
    	display: flex;
    
    	justify-content: space-around;
    
    	align-items: flex-end;
    
    	flex-wrap: wrap;
    }
    
    .demo .item{
    	width: 300px;
    	height: 50px;
    	background: #444;
    	margin-bottom: 20px;
    }
    </style>
    
    展开全文
  • 主要介绍了CSS3移动端vw+rem不依赖JS实现响应式布局的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue-cli 中实现响应式布局

    千次阅读 热门讨论 2021-02-14 09:28:03
    vue-cli 中实现响应式布局 我们在进行前端开发中必然会遇到PC与移动端的适配,面对这样的问题有些公司会准备两个页面,移动是移动,PC是PC,而响应式布局就是根据用户不同的机型展示不同的页面,废话不多说,直接贴...

    vue-cli 中实现响应式布局

    我们在进行前端开发中必然会遇到PC与移动端的适配,面对这样的问题有些公司会准备两个页面,移动是移动,PC是PC,而响应式布局就是根据用户不同的机型展示不同的页面,废话不多说,直接贴代码,对前端感兴趣的小伙伴可以加我QQ:1627889159

    首先我们这个功能是借助vuex实现的,没下载的小伙伴可以先下一个
    yarn add vuex
    
    既然是响应式布局就要准备两套css,一个是PC端的css,一个是移动端的css,我
    们暂且将PC端的样式称为computer,移动端的样式称为mobile
    

    我们首先要做的就是当前屏幕的宽度

    state: {
        screenWidth: document.documentElement.clientWidth,
        screenHeight: document.documentElement.clientHeight
      }
    

    这是vuex的state,我们后续还要实时监控屏幕宽度,所以还需要提供一个改变screenWidth的方法,于是我又写了一个mutations

    mutations: {
        setWidth (state, value) {
          state.screenWidth = value
        },
        setHeight (state, value) {
          state.screenHeight = value
        }
      }
    

    这样我们的vuex的文件就写好了,而后就是APP.vue,我们需要在这个文件下添加一个window.onresize事件实时更新vuex中的screenWidth值,在这里我们使用了辅助函数

    import { mapState, mapMutations } from 'vuex'
    

    在mounted钩子函数中添加事件

    mounted () {
        window.onresize = () => { 
        	this.setWidth(document.documentElement.clientWidth) 
        }
    }
    

    这样好比说我们网页中的导航,移动端时我们需要它在底部,PC端时我们需要它在顶部,这样我们就可以在nav.vue这个组件中用watch或computed监听screenWidth的值,这里我们用的是computed

    <ul :class="computedPhone">//根据screenWidth提供不同的class名
          <router-link to='/file' tag="li" active-class="active">电影</router-link>
          <router-link to='/cinma' tag="li" active-class="active">影院</router-link>
          <router-link to='/center' tag="li" active-class="active">个人中心</router-link>
    </ul>
    
    computed: {
        ...mapState('stylesheet', ['screenWidth']),
        computedPhone () {
          if (this.screenWidth < 1024) {
            return 'mobile'
          } else {
            return 'computer'
          }
        }
      }
    

    这样只要写好两套css就可以实现响应式布局了,如果小伙伴对前端感兴趣可以加我QQ:1627889159

    展开全文
  • 本文通过代码给大家总结了常见的响应式布局media的使用方法,感兴趣的朋友参考下吧
  • 实现响应式布局的方法: 1 使用Bootstrap用栅格化布局 -->>第三方开源框架 2 Css3-Modia Query -->>最简单的方式(一般使用这种) 3 借助原生JavaScript -->>成本高,不推荐使用
  • 实现响应式布局的方式-CSS3实现

    千次阅读 2017-08-04 16:45:47
    如何实现响应式布局: 1. css3-Media Query //最简单的方式 2. 原生JavaScript //成本高 不建议使用 3. 第三方开源框架 //可以很好的支持浏览器响应式布局的设计 一、css3-Media Query常见的属性: device-width,...
  • 这里写自定义目录标题Vue封装组件实现响应式布局1. 封装 Layout.vue组件2. Layout.vue组件使用 Vue封装组件实现响应式布局 主要思路:使用flex布局,左边主体内容区域根据页面宽度自适应,右边侧边栏固定宽度。使用...
  • HTML5和CSS实现响应式布局

    千次阅读 2018-09-23 11:18:37
    HTML5和CSS实现响应式布局 一.思路:HTML和CSS实现PC端布局后使用媒体查询修改样式 二.效果 gif图太大,放不上,两张截图 三. 源代码及效果展示 github 欢迎大家star学习 ...
  • BootStrap栅格系统 文章目录 一、什么是响应式布局... 二、如何实现响应式布局 三、实现步骤 四、实例 一、什么是响应式布局? 同一套页面可以兼容不同分辨率的设备。如在电脑上访问苹果的网站:https:/...
  • Java 网络爬虫实现网络抓取图片数据、流式布局、响应式布局、懒加载、动态切换加载技术
  • 用CSS实现响应式布局

    万次阅读 多人点赞 2018-07-30 15:30:14
    响应式网页看起来高大上,但实际上,不用JS只用CSS也能实现响应式网站的布局 要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用 使用@media 的三种方式 第一: 直接在CSS文件中使用 @media 类型 and (条件...
  • SASS Mixin实现响应式布局

    千次阅读 多人点赞 2014-03-30 08:58:39
    好的,今天我们来研读下css大牛Chris Coyier的利用SASS实现响应式布局的解决方案(Simple Technique for using Sass for Rows)。 列间空隙的处理,每行的最后一列没有空隙,前面的其他列具有统一的空隙,水平和垂直...
  • 用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局 要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中使用: @media 类型 ...
  • 如何实现响应式布局

    万次阅读 多人点赞 2019-01-09 13:33:11
     所谓响应式布局,就是指同一个网页,在不同的终端上的显示效果不同,但是访问的确实是同一个页面,只是因为浏览器会根据终端的不同(例如屏幕宽度、横竖屏、移动端还是pc端等)选择的渲染方式也不同。相信大家做...
  • 分享一种vue-lic中使用rem,实现响应式布局的超简单的方法。   第一步:封装设置rem的方法,放在公用类的js文件中,或者直接放在main.js文件中。 /** * 设置rem * @param pwidth * @param prem */ export ...
  • SCSS实现响应式布局

    千次阅读 2017-02-25 21:50:11
    参考文章 比较简单的分栏响应式布局 实例演示 官方文档
  • 框架Bootstrap实现响应式布局

    千次阅读 2020-05-07 22:38:37
    响应式布局: 同一套页面可以兼容不同分辨率的设备。 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子 步骤: 定义容器。相当于之前的table、 容器分类: container:两边留白,...
  • 媒体查询实现响应式布局

    千次阅读 2019-01-22 22:57:55
    本文主要介绍 @media 查询的使用。通过媒体查询,在不同的屏幕尺寸下,可以设置不同的样式。以此,可以完美解决不同屏幕适配的问题。话不多说,先来看看效果: CSS @media screen and (max-width: 400px) { ...
  • html+css实现响应式布局入门

    千次阅读 2020-02-15 20:35:37
    什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局...
  • 主要介绍了BootStrap实现导航栏的响应式布局,当在小屏幕、手机屏幕浏览时自动折叠隐藏的效果,非常不错,具有参考借鉴价值,对bootstrap 响应式布局导航栏功能感兴趣的朋友一起学习吧
  • 前言  移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配。那么来讲讲rem在其中起... 核心思想:百分比布局可实现响应式布局,而rem相当于百分比布局。  实现手段:动态获取当前视口宽度w...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 67,582
精华内容 27,032
关键字:

怎么实现响应式布局