精华内容
下载资源
问答
  • 怎么实现响应式布局
    2022-03-07 19:11:30

    rem 根据根目录字体大小来适应

    1:设置html字体大小
    <style>
    	html {
          font-size: 625%;
        }
    </style>
    
    2:使用:1rem == 100px
    <style>
    	div {
          width:1rem;  // 100px
          height:0.5rem; // 50px
        }
    </style>
    
    更多相关内容
  • html5 css3响应式布局介绍及设计流程 实现响应式布局的3种手段.zip
  • 用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局 要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中使用: @media 类型 and ...
  • 本文通过代码给大家总结了常见的响应式布局media的使用方法,感兴趣的朋友参考下吧
  • 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天,我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。传统的开发方式是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 图片

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

     

    展开全文
  • css实现响应式布局

    2022-04-17 09:41:51
    什么是响应式布局 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够了。响应式设计与自适应设计的区别:响应式开发一套...

    一.什么是响应式布局

    响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够了。响应式设计与自适应设计的区别:响应式开发一套界面,通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容;自适应需要开发多套界面,通过检测视口分辨率,来判断当前访问的设备是pc端、平板、手机,从而请求服务层,返回不同的页面。cSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式,当重置浏览器窗口大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

    在这里插入图片描述

    二.响应式实现方式

    • 媒体查询(下面具体讲解)
    • 流体布局(float)
    • 弹性布局(flex)
    • 通过 JavaScript、JQuery 进行判断来显示不同的布局页面
    • Bootstrap 等第三方框架
    2.1 媒体查询
    • 媒体查询(Media Query)是CSS3新语法。
    • 使用 @media 查询,可以针对不同的媒体类型定义不同的样式
    • @media 可以针对不同的屏幕尺寸设置不同的样式
    • 使用@media才能够实现页面响应式布局

    语法:

    @media[not|only] type [and][expr] (media feature){
     rules
    }
    
    • type媒体类型:all(所有设备)、screen(用于电脑屏幕,平板电脑,智能手机等。)

    • media feature
      1)width(浏览器的窗口尺寸,可加min/max)
      2)device-width(设备的参数尺寸,可加min/max)

    • min-width:最小宽度,在媒体查询中,宽度大于或者等于最小宽度时,就触发其CSS样式

    • max-width:最大宽度,在媒体查询中,宽度小于或者等于最大宽度时,就触发其CSS样式
      注:
      1.一般都是先实现PC端页面,然后再去做其他设备的兼容(把媒体查询写在默认样式之后)
      2.设置宽度时,最好不要写死(px),而是用%单位参照父元素的大小

    2.2 使用媒体查询的方式

    1.直接在 CSS 文件中使用

    <style type="text/css">
      // 没有经过媒体查询限制的 CSS
        @media 类型 and (条件 1) and (条件 2){
        // 媒体查询生效才会执行的 CSS 
          }
    </style>
    

    2.使用import导入

     // 当所有设备的宽度小于 980px 时,才会使用 import 导入 CSS 文件
    @import url("css/media.css") all and (max-width:980px);
    

    3.使用 link 链接,media 作为属性用于设置查询方式

    // 当所有设备的宽度小于 980px 时,才会使用 link 链接 CSS 文件
     <link rel="stylesheet" href="css/media.css" media="all and (max-width:980px)" /> 
    

    注:媒体查询的优先级与普通 CSS 完全相同,因此当使用媒体查询时,一定要将媒
    体查询的样式放在默认样式之后,否则媒体查询会被默认样式覆盖,也就无法针对不同设备
    进行变化

    2.3案例
       * {
               margin: 0px;
               padding: 0px;
               box-sizing: border-box;
           }
           body {
               background-color: rgb(242, 242, 242);
           }
           nav {
               width: 100%;
               height: 40px;
               text-align: center;
               padding-top: 10px;
           }
           nav p {
               margin-top: 10px;
           }
           .content {
               width: 100%;
               margin-top: 40px;
           }
           .content>div {
               width: 50%;
               float: left;
           }
           .left img {
               width: 90%;
               height: 600px;
           }
           .right {
               /* background-color: aqua; */
               height: 850px;
               margin-left: -40px;
           }
           table {
               width: 100%;
               /* width: 300px;
               margin-bottom: 10px; */
           }
           table tr {
               width: 100%;
               /* margin-top: 20px;
                */
               height: 30px;
           }
           table tr td {
               font-size: 20px;
           }
           table tr td input:not([type=button]),
           table tr td select {
               width: 80%;
               height: 40px;
           }
           table tr td textarea {
               width: 80%;
           }
           table tr td input[type=button] {
               width: 100px;
               height: 40px;
               background-color: green;
           }
           @media screen and (max-width:600px) {
               .content>div {
                   float: none;
                   width: 100%;
                   text-align: center;
               }
           }
    
     <nav>
           <h1>联系我们</h1>
           <p>请填写信息:</p>
       </nav>
       <div class="content">
           <div class="left">
               <img src="../image/map.png" alt="">
           </div>
           <div class="right">
               <table>
                   <tr>
                       <td>联系人</td>
                   </tr>
                   <tr>
                       <td><input type="text" placeholder="请输入姓名.."></td>
                   </tr>
                   <tr>
                       <td>联系电话</td>
                   </tr>
                   <tr>
                       <td><input type="text" placeholder="请输入邮箱.."></td>
                   </tr>
                   <tr>
                       <td>测试</td>
                   </tr>
                   <tr>
                       <td><select name="city" id="city">
                               <option>北京</option>
                               <option selected="selected">上海</option>
                               <option>厦门</option>
                           </select></td>
                   </tr>
                   <tr>
                       <td>留言</td>
                   </tr>
                   <tr>
                       <td><textarea id="contents" cols="30" rows="10" placeholder="反馈信息"></textarea></td>
                   </tr>
                   <tr>
                       <td><input type="button" name="" id="" value="提交"></td>
                   </tr>
               </table>
           </div>
       </div>
    

    在这里插入图片描述
    在这里插入图片描述

    三.补充:单位

    • px:像素(pixel)相对长度单位,,是相对于屏幕显示器分辨率而言的;
    • em:如果自身有font-size,em相对于自己的font-size,如果自身没有font-size,em相对于父元素的font-size(任何浏览器默认字体大小都是16px,所有未经调整的浏览器都符合1em=16px)
    • %:相对于父元素的宽度大小
    • rem:相对于根元素(html)的字体大小
    html {
     	font-size: 12px;
    }
    
    div {
       font-size: 2rem; /* 24px */
       width: 5rem;  /* 60px */
       background-color: skyblue;
    }
    
    • vw:视口的最大宽度,1vw=视口宽度的百分之一;
    • vh:视口得最大高度,1vh=视口高度的百分之一;
    展开全文
  • autoresponsive-react-native ReactNative 的自动响应式网格布局库。示例 现场演示和文档:xudafeng.github.io/autoresponsive-react 官方示例 安装 $ npm i autoresponsive-react-native --save 相关版本 React ...
  • Vue 老项目 如何实现响应式布局

    千次阅读 2022-04-07 16:33:15
    此处的项目为vue2版本,因为该项目立项阶段未要求兼容大屏设备和移动端设备,原设计稿尺寸1920X1080像素,如何实现响应式布局。 一、安装 postcss-px2rem 和 lib-flexible-computer npm install postcss-px2rem --...

    vue项目实现大屏展示 自适应问题

    此处的项目为vue2版本,因为该项目立项阶段未要求兼容大屏设备和移动端设备,原设计稿尺寸1920X1080像素,如何实现响应式布局。

    一、安装 postcss-px2rem 和 lib-flexible-computer

    npm install postcss-px2rem --save
    
    npm install lib-flexible-computer --save
    

    二、修改全局 CLI 配置

    module.exports = {
        publicPath: "./",
        outputDir: "dist",
        lintOnSave: true,
        css: {
            loaderOptions: {
                css: {},
                postcss: {
                    plugins: [
                        require("postcss-px2rem")({
                            remUnit: 192 //  设计图宽度/10
                        })
                    ]
                }
            }
        },
    };
    

    三、修改 main.js

    import Vue from 'vue'
    import App from './App'
    // 计算响应式
    import 'lib-flexible-computer'
    
    new Vue({
        render: h => h(App)
    }).$mount('#app')
    

    四、注意

    1. 会自动将vue文件style标签中的px转换城rem;
    2. 不能将标签内嵌样式中的px转换城rem;
    展开全文
  • vw是css3出现的一个新单位,它是“view width”缩写,定义为把当前屏幕分成一百份,1vw即为屏幕的1%,与之对应的是vh,把高分成一百份,1vh即为屏幕高的1%,一般我们常用的vw单位来完成响应式开发 (2)rem介绍 rem...
  • 如何实现响应式布局

    万次阅读 多人点赞 2019-01-09 13:33:11
     所谓响应式布局,就是指同一个网页,在不同的终端上的显示效果不同,但是访问的确实是同一个页面,只是因为浏览器会根据终端的不同(例如屏幕宽度、横竖屏、移动端还是pc端等)选择的渲染方式也不同。相信大家做...
  • 用媒体查询实现响应式布局

    千次阅读 2022-04-14 15:17:48
    但是如果子元素有自己的颜色,就会使用自己的颜色 如果写了两条响应式但是条件相反,谁在下面谁算数 ----------------------------------------------------------------------------------------------------------...
  • 主要介绍了BootStrap实现导航栏的响应式布局,当在小屏幕、手机屏幕浏览时自动折叠隐藏的效果,非常不错,具有参考借鉴价值,对bootstrap 响应式布局导航栏功能感兴趣的朋友一起学习吧
  • 前端实现响应式布局的几种方法

    千次阅读 2022-03-19 21:39:49
    分享一下常用的响应式布局方法,flex布局、百分比布局、rem布局、媒体查询、自适应布局
  • 最近深入学习了Vue实现响应式的部分源码,将我的些许收获和思考记录下来,希望能对看到这篇文章的人有所帮助。有什么问题欢迎指出,大家共同进步。 什么是响应式系统 一句话概括:数据变更驱动视图更新。这样我们就...
  • 用CSS实现响应式布局

    千次阅读 2021-08-04 08:19:01
    响应式网页看起来高大上,但实际上,不用JS只用CSS也能实现响应式网站的布局要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用使用@media 的三种方式第一: 直接在CSS文件中使用@media 类型 and (条件1) and ...
  • CSS实现响应式布局

    2021-06-29 08:51:46
    用CSS实现响应式布局响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询,下面就介绍一下怎么运用:使用@media 的三种方法1.直接在CSS文件中使用:@media 类型 and (条件1)...
  • 框架Bootstrap实现响应式布局

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

    千次阅读 2018-12-18 10:58:44
    display:flex实现响应式布局 display:flex实现响应式布局 &lt;body&gt; &lt;div class="demo"&gt; &lt;div class="item"&gt;&lt;/div&gt; &lt;div ...
  • Vue项目如何实现响应式布局
  • 响应式布局实现方案

    千次阅读 2022-04-20 11:24:17
    响应式布局,viewport,ui框架实现响应式
  • 利用bootstraps实现响应式布局

    万次阅读 2019-01-18 16:48:44
    首先我们要在页面上引用...接下来只是说它这个布局里的一个响应式 ; width: 800px;"> <div class="col-lg-3 bg-danger col-md-4 col-sm-6"></div> <div class="col-lg-3 bg-info col-md-4 col-sm-6"></div> ...
  • 响应式布局实现方式

    千次阅读 2021-06-15 17:52:39
    前言 2004年,Cameron Adams写了一篇题为《Resolution dependent layout》的帖子,描述了一种可以创造适应多种屏幕分辨率的设计的方式...“响应式设计”这个词是Ethan Marcotte在2010年首度提出的,他将其描述为三种技
  • Java 网络爬虫实现网络抓取图片数据、流式布局、响应式布局、懒加载、动态切换加载技术
  • rem实现响应式布局

    2020-03-11 11:44:18
    size来决定的,根元素的font-size相当于提供了一个基准,当页面的size发生变化时,只需要改变font-size的值,那么以rem为固定的元素的大小也会发生响应式的变化,因此,如果通过rem来实现响应式布局,只需要根据视图...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 77,574
精华内容 31,029
关键字:

怎么实现响应式布局