精华内容
下载资源
问答
  • 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天,我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。传统的开发方式是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 图片

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

     

    展开全文
  • 在设计响应式布局时,我们经常会根据屏幕的大小来调整样式已适应不同窗口大小的所带来的不同视觉效果,比如说我们常见的导航栏设计,当我们在点击对应的标题时让其背景色切换成深绿色,这样在视觉上更用户能第一眼就...

        在设计响应式布局时,我们经常会根据屏幕的大小来调整样式已适应不同窗口大小的所带来的不同视觉效果,比如说我们常见的导航栏设计,当我们在点击对应的标题时让其背景色切换成深绿色,这样在视觉上更用户能第一眼就能知道自己正点击在哪个选项上了,而在样式上,通常我们会在PC端时显示到顶部位置,而换到移动端时则显示到左边来,如下图所示:

    处理当前的点击样式 ,最简单的方法就是直接使用:hover事件来实现该方法,我们给li标签添加:hover样式并给其添加背景色,这样当我们将鼠标点击到对应的标题上时就可以实现背景选中效果。

    #HTML
    <div class="menu">
        <i class="fa fa-align-justify" @click="open" ></i>
        <ul v-if="flag">
          <li v-for="(menu,index) in menus" :key="index" >{{menu}}</li>
        </ul>
    </div>
    #css
    .menu ul{
      overflow: hidden;
      white-space: nowrap;
    }
    .menu ul li {
      display: inline-block;
      font-size: 1.1rem;
      padding: 0 20px;
      color: #fff;
      line-height: 50px;
      cursor: pointer;
    }
    .menu ul li:hover{
      background-color: #045f56;
    } 

    使用Chrome浏览器模拟移动端屏幕测试点击效果,通过response菜单我们可以随意的变化浏览窗口大小来模拟不同屏幕大小进行测试,这里我们可以可以看到同样可以实现该点击效果,所以:hover实现起来还是相当的简单方便快捷。

    修改下我们的配置,打开package.json文件,将本机IP地址添加到serve后面(这里我的IP是192.168.31.224):"serve": "vue-cli-service serve--192.168.31.224",然后用手机链接WIFI保证在同一网络,访问192.168.31.224:8080即可查看当前项目,这里测试了好几遍效果一样可行(网上有人说移动端没有:hover事件,该方法无效,这里我验证是可行的哦)。

     如果你还是不放心,那么就用Vue提供的@click事件来实现吧,虽然相对麻烦点,但是一样可以实现相同的效果,这里我们需要设定一个active样式,然后通过click点击事件来切换当前选项的active样式,定义一个空的id,点击时把index附上,将index赋值给id,这样就可以触发绑定样式了。

    #HTML
    <div class="menu">
      <i class="fa fa-align-justify" @click="open" ></i>
      <ul v-if="flag">
        <li v-for="(menu,index) in menus" :key="index" 
        @click="chiose(index)" :class="{'active':id===index}">{{menu}}</li>
      </ul>
    </div>
    #CSS
    .active{
      background-color: #045f56;
    } 
    #SCRIPT
     chiose(index){
        this.id=index   
    },

    问题来了:这里hover() 方法是当鼠标指针悬停在被选元素上时执行样式修改(:hover 选择器可用于所有元素),也就是说鼠标放上去就应该改变了样式才对,这里为啥是点击之后才生效呢(按理说移动设备是没有鼠标的,只能通过手指和网页直接接触,自然也就不存在悬浮事件了,那么现在是什么状况)。

     

    经过反复的测试,原来hover() 方法在PC端显示时的确是鼠标悬停事件,只要鼠标移到哪里状态就切换到哪里,而当我们切换到移动端时,移动设备是没有鼠标事件,此时的hover() 方法则为点击事件,手指点击相应的选项状态随着切换,这个不错,下面是手机端的现实效果。

    展开全文
  • 移动端基础及响应式布局

    千次阅读 2017-11-24 19:02:23
    2.响应式布局基础 3.响应式布局之流式布局 4.做移动端项目之前的准备 5.响应式布局demo 6.rem响应式布局 7.swiper的使用和轮播图 8.综合案例-微信场景应用1.移动端概述和hybird模式移动端:运行在移动设备上的...
    目录

    1.移动端概述和hybird模式
    2.响应式布局基础
    3.响应式布局之流式布局
    4.做移动端项目之前的准备
    5.响应式布局demo
    6.rem响应式布局
    7.swiper的使用和轮播图
    8.综合案例-微信场景应用

    1.移动端概述和hybird模式

    移动端:运行在移动设备上的产品
    产品大部分都只需要适配ios和安卓系统即可
    响应式布局:在不同的设备上都能给予客户最好的操作体验
    移动端产品分为APP手机应用和H5
    目前市面上流行的APP产品大部分都是原生APP开发者做的,ios:object-c,安卓:java-native,目前市场正在趋于使用js来开发原生APP:React Native、phoneGap…
    H5:HTML页面,都是运行在浏览器中的(PC端浏览器、移动端浏览器),在ios和安卓平台上浏览器大部分是webkit内核的,所以移动端做H5页面不用像PC端一样处理兼容

    总结:
    1.做HTMl页面,需要在PC端和移动端访问
    2.PC端和移动端用的是不同的项目,例如:京东、淘宝、QQ…PC端的项目不需要做响应式
    3.在移动端开发出来的HTML页面运行的环境:移动端的浏览器、原生APP(Native APP)的webView中:hyBrid模式。例如在微信中打开一个H5页面,其实就是运行在微信的webView中的

    hyBrid模式(混合模式移动应用)

    把开发的H5页面嵌入到Native APP中的webView中运行(所谓的webView简单理解为一个浏览器,也是webkit内核的)

    2.响应式布局基础

    搭建一个H5页面,需要在head中添加一个meta标签:
    <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    webstorm中:meta:vp 加tab键可以自动生成

    js动态设置:

    var oMeta = document.createElement("meta");
    oMeta.name = "viewport";
    oMeta.content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0";
    document.head.appendChild(oMeta);

    viewport:视口
    width=device-width:设置视口的宽度等于设备的宽度,如果不设置的话,默认宽度为980像素。通俗的说,就是告诉当前的浏览器按照多大的宽度来渲染页面,即展示当前这个页面的区域有多宽(浏览器宽度)

    user-scalable=no:禁止用户手动缩放

    initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0:设置屏幕默认/最大/最小的缩放比例

    高清屏:
    苹果手机是二倍高清屏的,也就是我们在手机上看到的那张100*100的图片,其实苹果手机是按照200*200的尺寸进行渲染的,这样的话,如果真实图片本身才100*100,最后呈现出来的就是被拉伸后变模糊的效果。故:苹果手机上需要的图片都需要比看到的尺寸大一倍才可以

    DPI适配思想:在做页面的时候,最好每一张素材图片都准备2~3套,比如:logo.png是100*100,logo@2x.png是200*200,logo@3x.png是300*300

    媒体查询 @media

    媒体设备:all所有设备 screen所有屏幕设备(PC+移动端) print打印机设备…
    媒体条件:指定在什么样的条件下指定对应样式
    例如:
    @media all and (max-width:319px){}宽度小于320px
    @media all and (min-width:320px) and (max-width:359px){}在320~360之间
    @media all and (-webkit-device-pixel-ratio:2){}二倍屏

    3.响应式布局之流式布局

    响应式布局的解决方法:

    在真实项目中,设计师的设计稿一般是:640*1136 或 640*960 或 750*1334

    流式布局法:

    1. 容器或者盒子的宽度一般都不是固定的值,而是使用百分比,相对于视口区域的百分比
    2. 其余的样式:字体、高度、margin、padding等等都按照设计稿上标注尺寸的一半来设置
    3. 对于有些屏幕尺寸下,设置的固定值不是特别好看的话,使用@media进行微调整

    苹果手机的尺寸:
    5s及以下都是320px、6是375px、6p是414px
    常用的安卓机尺寸:320px、360px、480px、540px、 720px…

    特殊情况:设计稿是640px,素材图也是640px,这样的话在iPhone6/6p展示的时候,图片不够大,对于这种情况需要向设计师单独要一张更大的图,比如:1280px的尺寸

    @media all and (-webkit-min-device-pixel-ratio: 2) and (min-width: 321px) {
        .box {
            background: url("banner@big.png");
        }
    }
    
    @media all and (min-width: 641px) {
        .box {
            background: url("banner@big.png");
        }
    }
    4.做移动端项目之前的准备

    常用的META标签(移动端)

    忽略数字自动识别为电话号码:
    <meta name="format-detection" content="telephone=no"/>

    把页面增加到桌面主屏幕:
    在苹果手机的Safari浏览器中访问一个页面,用户可以通过“添加到桌面”这一操作把网页保存到自己的主屏幕桌面上(就像安装一个APP,在主屏幕上就会有一个操作的图标),这样下一次可以直接点击图标打开页面。(只对IOS有效)

    WebApp全屏模式:
    <meta name="apple-mobile-web-app-capable" content="yes"/>

    设置状态栏颜色:
    只有在开启WebApp全屏模式下才能起到效果。content的值为 default(状态栏将为正常的,即白色,网页从状态栏以下开始显示) | black(状态栏将为黑色,网页从状态栏以下开始显示) | black-translucent(状态栏将为灰色半透明,网页将充满整个屏幕,状态栏会盖在网页之上)。
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>

    添加到主屏后的图标:
    <link href="图片的地址" sizes="114x114" rel="apple-touch-icon-precomposed"/>
    IOS系统中对ICON有一套规范,就是在IOS设备的图标统一为“四边圆角”、“高光处理”。至于“图标阴影”,是IOS设备中统一为所有桌面元素增加的,所以不作为图标单独处理的样式。rel=”apple-touch-icon-precomposed”是设定按照设计稿原图的图标显示,rel=”apple-touch-icon”是设定在原图的基础上增加一些高光光亮效果。一般来说我们的ICON的尺寸是114x114。

    添加到主屏后的标题:
    <meta name="apple-mobile-web-app-title" content="标题"/>

    添加智能App广告条 Smart App Banner(不常用):
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"/>

    QQ浏览器(X5内核)独有的META:
    <meta name="x5-orientation" content="portrait|landscape"/> //->设置屏幕方向 <meta name="x5-fullscreen" content="true"/> //->设置全屏

    UC浏览器独有的META:
    <meta name="screen-orientation" content="portrait|landscape"/> //->设置屏幕方向 <meta name="full-screen" content="true"/> //->设置全屏 <meta name="viewport" content="uc-fitscreen=no|yes"/> //->缩放不出现滚动条 <meta name="nightmode" content="enable|disable"/> //->夜间模式

    强制图片显示:UC浏览器为了节省流量,为用户提供了无图模式,但是如果页面的图片是必不可少的,如验证码的,需要强制浏览器显示图片,可以设置imagemode。通过META设置图片加载方式会作用于整个页面,如果希望对单个图片进行设置,那么可以使用这个<img src="" show="force"/>

    <meta name="imagemode" content="force"/>

    使用了application这种应用模式后,页面讲默认全屏,禁止长按菜单,禁止收拾,标准排版,以及强制图片显示。

    <meta name="browsermode" content="application"/>

    详细可参考:
    http://www.zhufengpeixun.com/qianduanjishuziliao/mobileDevelopment/2016-07-02/480.html

    常用的META标签:
    http://www.zhufengpeixun.com/qianduanjishuziliao/mobileDevelopment/2016-06-29/457.html

    5.响应式布局demo

    这里写图片描述

    HTML代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta name="format-detection" content="telephone=no"/>
        <link rel="stylesheet" charset="UTF-8" href="reset.css" type="text/css">
        <link rel="stylesheet" charset="UTF-8" href="index.css" type="text/css">
        <!--[if lt IE 9]>
        <script charset="UTF-8" type="text/javascript" src="HTML5.min.js"></script>
        <![endif]-->
    </head>
    <body>
    
    <header class="header">
        <div class="con">
            <h1 class="logo">
                <a href="#"><img src="img/logo.png"/></a>
                猎豹安全浏览器
            </h1>
            <nav class="nav">
                <ul>
                    <li class="bg">
                        <a href="#">首页<i></i></a>
                    </li>
                    <li>
                        <a href="#">下载<i></i></a>
                    </li>
                    <li>
                        <a href="#">论坛<i></i></a>
                    </li>
                    <li>
                        <a href="#">International<i></i></a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="headerBg"></div>
    
    <!--banner-->
    <section class="banner">
    
    </section>
    <script type="text/javascript"></script>
    </body>
    </html>

    css代码:

    html, body {
        width: 100%;
        overflow-x: hidden;
    }
    
    a {
        color: #000;
    }
    
    a:hover, a:active {
        color: #000;
    }
    
    .con {
        width: 960px;
        margin: 0 auto;
    }
    
    /*header*/
    .header, .headerBg {
        height: 89px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        z-index: 10;
    }
    
    .header {
        border-bottom: 1px solid #999;
    }
    
    .headerBg {
        opacity: 0.1;
        filter: alpha(opacity=10);
        background: #000;
        z-index: 9;
    }
    
    .header .logo {
        float: left;
        width: 270px;
        height: 51px;
        margin-top: 19px;
        font-size: 0;
    }
    
    .header .logo img {
        width: 100%;
        height: 100%;
    }
    
    .header .nav {
        float: right;
    }
    
    .header .nav li {
        position: relative;
        float: left;
    }
    
    .header .nav li a {
        display: block;
        text-decoration: none;
        padding: 0 30px;
        height: 89px;
        line-height: 89px;
        color: #f4f4f4;
        font-size: 18px;
    }
    
    .header .nav li.bg a {
        color: #fff;
    }
    
    .header .nav li a i {
        z-index: -1;
        position: absolute;
        top: 0;
        left: 50%;
        width: 0; /*目标值为100%*/
        margin-left: 0; /*目标值为-50%*/
        height: 89px;
        background: #000;
        opacity: 0.1;
        filter: alpha(opacity=10);
    }
    
    .header .nav li a:hover i {
        width: 100%;
        margin-left: -50%;
        /*过渡动画 PC端写5套,移动端只留第一和最后一个,顺序不能变*/
        -webkit-transition: all .1s linear 0s;
        -moz-transition: all .1s linear 0s;
        -o-transition: all .1s linear 0s;
        -ms-transition: all .1s linear 0s;
        transition: all .1s linear 0s;
    }
    
    /*banner*/
    .banner {
        width: 100%;
        height: 490px;
        background: #ff6900;
    }
    
    /*响应式*/
    @media all and (max-width: 760px) {
        .con {
            width: 100%;
        }
    
        .header .nav {
            display: none;
        }
    
        .header, .headerBg {
            height: 46px;
        }
    
        .header .logo {
            height: 28px;
            width: 148px;
            margin-top: 9px;
            margin-left: 10px;
        }
    
        .header .nav {
            float: right;
        }
    }
    6.rem响应式布局

    做的H5页面只在移动端访问,可以用rem,因为rem不兼容低版本的浏览器

    rem是指当前页面中元素的REM单位的样式值都是针对于HTML元素的fontSize的值进行动态计算

    例如:
    让当前方块在页面中垂直、水平居中:
    这里写图片描述

    传统方式:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta name="format-detection" content="telephone=no"/>
        <link rel="stylesheet" charset="UTF-8" href="reset.css" type="text/css">
        <link rel="stylesheet" charset="UTF-8" href="index.css" type="text/css">
        <!--[if lt IE 9]>
        <script charset="UTF-8" type="text/javascript" src="HTML5.min.js"></script>
        <![endif]-->
        <style type="text/css">
            html {
                font-size: 100px;
            }
    
            html, body {
                width: 100%;
                height: 100%;
                overflow: hidden;
    
            }
    
            .box {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
    
                width: 200px;
                height: 200px;
                background: #f7e1b5;
            }
        </style>
    </head>
    <body>
    <div class="box"></div>
    <script type="text/javascript"></script>
    </body>
    </html>

    使用rem布局:

    .box {
        ...
        width: 2rem;
        height: 2rem;
        ...
    }

    第一步:从UI设计师拿到设计稿(psd格式的设计稿) 640*1136

    第二步:在样式中给HTML设置一个fontSize的值,一般都设置一个方便后面计算的值,如:100px,之所以用100px,主要是浏览器最小的字体都是12px,用10px比例计算的结果和真实的UI设计稿会存在那么一点偏差

    html {
        font-size: 100px; /*相当于1REM = 100px*/
    }

    第三步:写页面,写样式,完全按照设计稿的尺寸来写样式,此时不用管任何事情,设计稿的宽度、高度、字体大小、margin、padding的值是多少,就写多少
    但是在写样式的时候,需要把得到的像素值除以100,计算出对应的REM的值,设定的也都是REM的值,值得注意的是:真实项目中外层盒子的宽度还是不写固定值,沿用流式布局法的思想

    第四步:根据当前屏幕的宽度和设计稿的宽度来计算HTML的fontSize的值
    如:

    设备尺寸比例fontSizerem
    设计稿640600*300fontSize=100px6rem*3rem
    手机320300*150fontSize=50px3rem*1.5rem
    手机375fontSize=375/640*100=58.59375px
    <script type="text/javascript">
        //根据当前屏幕的宽度和设计稿宽度的比例,动态计算当前宽度下的fontSize值应该是多少,如果fontSize的值改变了,之前设定的所有rem单位的值会自动跟着放大和缩小
        ~function () {
            var desW = 640,
                winW = document.documentElement.clientWidth,
                ratio = winW / desW;
            document.documentElement.style.fontSize = ratio * 100 + "px";
        }();
    </script>

    如果页面太大,当页面比设计稿还要大的时候,可以尺寸不变,两边留白,居中显示,如京东:
    将页面中的所有内容用section标签包起来:
    <section id="main">...</section>

    <script type="text/javascript">
        //根据当前屏幕的宽度和设计稿宽度的比例,动态计算当前宽度下的fontSize值应该是多少,如果fontSize的值改变了,之前设定的所有rem单位的值会自动跟着放大和缩小
        ~function () {
            var desW = 640,
                winW = document.documentElement.clientWidth,
                ratio = winW / desW,
                oMain = document.getElementById("main");
            if (winW > desW) {
                oMain.style.width = desW + "px";
                oMain.style.margin = "0 auto";
                return;
            }
            document.documentElement.style.fontSize = ratio * 100 + "px";
        }();
    </script>

    有时候需要检测一下当前的浏览器是PC端还是移动端,如果当前浏览器是PC端,但是访问的页面是移动端的页面,我们让其跳转到PC端的页面;如果当前的浏览器是移动端的,但访问的是PC端的页面,让其跳转到移动端的页面:
    跳转:window.location.href = 'xxx'
    检测PC还是移动端:

    if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){  
        if(window.location.href.indexOf("?mobile")<0){  
            try{  
                if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){  
                    window.location.href="手机页面";  
                }else if(/iPad/i.test(navigator.userAgent)){  
                    window.location.href="平板页面";  
                }else{  
                    window.location.href="其他移动端页面"  
                }  
            }catch(e){}  
        }  
    }  
    7.swiper的使用和轮播图

    swiper官网:http://www.swiper.com.cn/

    注意:当开启swiper的loop模式下,它的原理是:如果是三张轮播区域,会把第一张放末尾,最后一个放开头,最后变成五个,所以索引也会改变
    刚开始初始化成功的时候,默认会存在一个从索引0切换到索引1的过程
    如:
    当前的活动块个数:n=5
    索引为0时,page是n-2,即page3
    索引为1时,page1
    索引为2时,page2
    索引为3时,page3
    索引为4即n-1时,page1

    8.综合案例-微信场景应用

    效果图:
    这里写图片描述

    这里写图片描述

    用到的插件:swiper、fastClick(解决移动端click事件的300ms延迟)、animate动画库

    HTML代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>移动端场景应用</title>
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <link rel="stylesheet" href="css/reset.css" charset="utf-8">
        <link rel="stylesheet" href="css/swiper.min.css" charset="utf-8">
        <link rel="stylesheet" href="css/index.css" charset="utf-8">
    </head>
    <body>
    
    
    <section class="main" id="main">
        <!--CONTAINER-->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <!--slide1-->
                <div class="swiper-slide page1" id="page1">
                    <img src="img/page1-text2.png"/>
                    <img src="img/page1-text3.png"/>
                    <img src="img/page1-text4.png"/>
                    <img src="img/page1-text5.png"/>
                </div>
                <!--slide2-->
                <div class="swiper-slide page2" id="page2">
                    <img src="img/page2-text1.png"/>
                    <img src="img/page2-text2.png"/>
                    <img src="img/page2-text3.png"/>
                    <img src="img/page2-text4.png"/>
                </div>
            </div>
        </div>
    
        <!--ARROW-->
        <div class="arrow"></div>
    
        <!--music-->
        <div class="music" id="musicMenu">
            <audio src="audio/Wired.mp3" preload="none" loop id="musicAudio"></audio>
        </div>
    </section>
    
    
    <script charset="UTF-8" type="text/javascript" src="js/swiper.min.js"></script>
    <script charset="UTF-8" type="text/javascript" src="js/index.js"></script>
    <script charset="UTF-8" type="text/javascript" src="js/fastClick.js"></script>
    </body>
    </html>

    css代码如下:

    html, body, .main, .swiper-container, .swiper-slide {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    html {
        font-size: 100px;
        /*设计稿:640*960*/
    }
    
    /*page1*/
    .page1 {
        position: relative;
        background: url("../img/bg1.jpg") no-repeat;
        background-size: cover;
    }
    
    .page1 img {
        position: absolute;
        opacity: 0;
    }
    
    .page1 img:nth-child(1) {
        width: 5.5rem;
        height: 5.12rem;
        bottom: .8rem;
        left: .5rem;
    }
    
    .page1 img:nth-child(2) {
        width: 3.7rem;
        height: 6rem;
        top: .28rem;
        right: 0;
    }
    
    .page1 img:nth-child(3) {
        width: .96rem;
        height: 2.32rem;
        top: 2.8rem;
        left: 2rem;
    }
    
    .page1 img:nth-child(4) {
        width: 7.86rem;
        height: 5.88rem;
        bottom: 0;
        left: -1.6rem;
    }
    
    /*实现切换完成后页面中的元素再开始运动的思想:开始的时候当前这个区域没有对应的id,当切换到这个区域的时候,为其增加id,在css中把所有的动画效果都放在指定的id下,这样的话只需要让区域有id,里面的子元素就有动画了*/
    #page1 img:nth-child(3) {
        -webkit-animation: bounceInLeft 1s linear 0s 1 both;
        animation: bounceInLeft 1s linear 0s 1 both;
    }
    
    #page1 img:nth-child(2) {
        -webkit-animation: bounceInRight 1s linear .3s 1 both;
        animation: bounceInRight 1s linear .3s 1 both;
    }
    
    #page1 img:nth-child(1) {
        -webkit-animation: bounceInUp 1s linear .6s 1 both;
        animation: bounceInUp 1s linear .6s 1 both;
    }
    
    #page1 img:nth-child(4) {
        -webkit-animation: bounceInUp 1s linear .9s 1 both;
        animation: bounceInUp 1s linear .9s 1 both;
    }
    
    /*page2*/
    
    .page2 {
        position: relative;
        background: url("../img/bg2.jpg") no-repeat;
        background-size: cover;
    }
    
    .page2 img {
        position: absolute;
        width: .61rem;
        height: 6.38rem;
        top: 2.5rem;
        opacity: 0;
    }
    
    .page2 img:nth-child(1) {
        width: 3.4rem;
        height: 1.74rem;
        top: 0;
        left: 0;
    }
    
    .page2 img:nth-child(2) {
        left: 1.48rem;
    }
    
    .page2 img:nth-child(3) {
        left: 3.2rem;
    }
    
    .page2 img:nth-child(4) {
        left: 4.7rem;
    }
    
    #page2 img:nth-child(1) {
        -webkit-animation: bounceInLeft 1s linear 0s 1 both;
        animation: bounceInLeft 1s linear 0s 1 both;
    }
    
    #page2 img:nth-child(2) {
        -webkit-animation: zoomIn 1s linear .3s 1 both;
        animation: zoomIn 1s linear .3s 1 both;
    }
    
    #page2 img:nth-child(3) {
        -webkit-animation: zoomIn 1s linear .6s 1 both;
        animation: zoomIn 1s linear .6s 1 both;
    }
    
    #page2 img:nth-child(4) {
        -webkit-animation: zoomIn 1s linear .9s 1 both;
        animation: zoomIn 1s linear .9s 1 both;
    }
    
    /*css3 动画*/
    @keyframes bounceInLeft {
        from, 60%, 75%, 90%, to {
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }
    
        0% {
            opacity: 0;
            transform: translate3d(-3000px, 0, 0);
        }
    
        60% {
            opacity: 1;
            transform: translate3d(25px, 0, 0);
        }
    
        75% {
            transform: translate3d(-10px, 0, 0);
        }
    
        90% {
            transform: translate3d(5px, 0, 0);
        }
    
        to {
            transform: none;
            opacity: 1;
        }
    }
    
    @keyframes bounceInRight {
        from, 60%, 75%, 90%, to {
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }
    
        from {
            opacity: 0;
            transform: translate3d(3000px, 0, 0);
        }
    
        60% {
            opacity: 1;
            transform: translate3d(-25px, 0, 0);
        }
    
        75% {
            transform: translate3d(10px, 0, 0);
        }
    
        90% {
            transform: translate3d(-5px, 0, 0);
        }
    
        to {
            transform: none;
            opacity: 1;
        }
    }
    
    @keyframes bounceInUp {
        from, 60%, 75%, 90%, to {
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }
    
        from {
            opacity: 0;
            transform: translate3d(0, 3000px, 0);
        }
    
        60% {
            opacity: 1;
            transform: translate3d(0, -20px, 0);
        }
    
        75% {
            transform: translate3d(0, 10px, 0);
        }
    
        90% {
            transform: translate3d(0, -5px, 0);
        }
    
        to {
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
    }
    
    @keyframes zoomIn {
        from {
            opacity: 0;
            transform: scale3d(.3, .3, .3);
        }
    
        50% {
            opacity: 1;
        }
        100% {
            opacity: 1;
        }
    }
    
    @keyframes bounce {
        from, 20%, 53%, 80%, to {
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transform: translate3d(0, 0, 0);
        }
    
        40%, 43% {
            animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transform: translate3d(0, -15px, 0);
        }
    
        70% {
            animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transform: translate3d(0, -10px, 0);
        }
    
        90% {
            transform: translate3d(0, -4px, 0);
        }
    }
    
    /*arrow*/
    .arrow {
        width: .48rem;
        height: .36rem;
        position: absolute;
        bottom: .2rem;
        left: 50%;
        margin-left: -.24rem;
        z-index: 10;
        background: url("../img/web-swipe-tip.png") no-repeat;
        background-size: cover;
        -webkit-animation: bounce 1s linear 0s infinite both;
        animation: bounce 1s linear 0s infinite both;
    }
    
    /*music*/
    .music {
        display: none;
        width: .5rem;
        height: .6rem;
        position: absolute;
        top: .3rem;
        right: .2rem;
        background: url("../audio/Figure_rythmique_croche_hampe_haut.svg") no-repeat;
        background-size: 100% 100%;
        z-index: 10;
    }
    
    .music audio {
        display: none;
    }
    
    .music.move {
        -webkit-animation: bounce 1s linear 0s infinite both;
        animation: bounce 1s linear 0s infinite both;
    }

    js代码如下:

    FastClick.attach(document.body);
    
    ~function () {
        var desW = 640,
            winW = document.documentElement.clientWidth,
            ratio = winW / desW,
            oMain = document.getElementById("main");
        if (winW > desW) {
            oMain.style.width = desW + "px";
            oMain.style.margin = "0 auto";
            return;
        }
        document.documentElement.style.fontSize = ratio * 100 + "px";
    }();
    
    /* init swiper */
    new Swiper('.swiper-container', {
        direction: 'vertical',
        loop: true,
        on: {
            //当切换结束后,给当前展示的区域添加对应的id,由此实现对应的动画效果
            slideChangeTransitionEnd: function () {
                var slideAry = this.slides, //有多少个活动块
                    curIn = this.activeIndex, //当前这个区域的索引,从1开始
                    total = slideAry.length;
    
    
                //计算id是page几
                var targetId = "page";
                switch (curIn) {
                    case 0 :
                        targetId += total - 2;
                        break;
                    case total - 1 :
                        targetId += 1;
                        break;
                    default:
                        targetId += curIn;
                }
    
                //给当前的活动块设置id,把其余的移除
                [].forEach.call(slideAry, function (item, index) {
                    if (curIn == index) {
                        item.id = targetId;
                        return;
                    }
                    item.id = null;
                });
    
            }
        }
    });
    
    //music
    ~function () {
        var musicMenu = document.getElementById("musicMenu"),
            musicAudio = document.getElementById("musicAudio");
    
        musicMenu.addEventListener("click", function () {
            if (musicAudio.paused) {
                musicMenu.className = "meau move";
                return;
            }
            musicAudio.pause();
            musicMenu.className = "music";
        })
    
        function contralMusic() {
            musicAudio.volume = 0.5;
            musicAudio.play();
            musicAudio.addEventListener("canplay", function () {
                musicMenu.style.display = "block";
                musicMenu.className = "music move";
            }, false);
        }
    
        window.setTimeout(contralMusic, 1000);
    }();
    展开全文
  • 响应式布局内容

    2020-10-09 09:21:12
    响应式布局 课堂目标 掌握flex布局 掌握网格布局 掌握响应式布局 知识点 flex 布局(弹性布局)参考 分为主轴(main axis)和交叉轴(cross axis) flex容器属性: flex-direction:设置主轴的方向,默认 row ...

    响应式布局

    课堂目标

    1. 掌握flex布局
    2. 掌握网格布局
    3. 掌握响应式布局

    知识点

    flex 布局(弹性布局)参考

    1. 分为主轴(main axis)和交叉轴(cross axis)

    flex容器属性:

    1. flex-direction:设置主轴的方向,默认 row

      • row(默认值):主轴为水平方向,起点在左端
      • row-reverse:主轴为水平方向,起点在右端
      • column:主轴为垂直方向,起点在上沿
      • column-reverse:主轴为垂直方向,起点在下沿
    2. flex-wrap:定义换行方式,默认不换行 nowrap

      • nowrap(默认):不换行
      • wrap:换行,第一行在上方。
      • wrap-reverse:换行,第一行在下方
    3. justify-content:定义了项目在主轴上的对齐方式,默认 flex-start

      • flex-start:左对齐
      • flex-end:右对齐
      • center:居中
      • space-between:两端对齐,项目间间隔都相等
      • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
    4. align-items:定义项目在交叉轴上如何对齐,默认 stretch

      • flex-start:交叉轴的起点对齐
      • flex-end:交叉轴的终点对齐
      • center:交叉轴的中点对齐
      • baseline: 项目的第一行文字的基线对齐
      • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度
    5. align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用

      • stretch(默认值):轴线占满整个交叉轴
      • flex-start:与交叉轴的起点对齐
      • flex-end:与交叉轴的终点对齐
      • center:与交叉轴的中点对齐
      • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布
      • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍

    项目的属性:

    1. order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为0
    2. flex-grow 属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
    3. flex-shrink 属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小,负值无效
    4. flex-basis 属性定义了在分配多余空间之前,项目占据的主轴空间,默认值为auto,即项目的本来大小。
    5. flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选
    6. flex属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
    7. align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

    grid 布局(网格布局)

    容器属性:

    1. grid-template-columns:定义每一列的列宽

    2. grid-template-rows:定义每一行的行高

      .container {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
      }
      
    3. repeat():接受两个参数,第一个参数是重复的次数,第二个参数是所要重复的值。重复某种模式也是可以的.

      .container {
        display: grid;
        grid-template-columns: repeat(3, 33.33%);
        grid-template-rows: repeat(3, 33.33%);
      }
      grid-template-columns: repeat(2, 100px 20px 80px);
      
    4. auto-fill :关键字
      有时,单元格的大小是固定的,但是容器的大小不确定。如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用auto-fill关键字表示自动填充。

      .container {  display: grid; 
                    grid-template-columns: repeat(auto-fill, 100px);
      }
      
    5. fr 关键字
      为了方便表示比例关系,网格布局提供了fr关键字(fraction 的缩写,意为"片段")。如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍.

      .container {  display: grid;  
                    grid-template-columns: 1fr 1fr; }
      
    6. minmax():函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。

    7. auto关键字表示由浏览器自己决定长度。

    8. 网格线的名称:grid-template-columns属性和grid-template-rows属性里面,还可以使用方括号,指定每一根网格线的名字,方便以后的引用。

    9. grid-row-gap属性设置行与行的间隔(行间距),grid-column-gap属性设置列与列的间隔(列间距)。

    10. grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式.

    11. grid-template-areas 属性
      网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

    12. grid-auto-flow 属性
      划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格。默认的放置顺序是"先行后列",即先填满第一行,再开始放入第二行,这个顺序由grid-auto-flow属性决定,默认值是row,即"先行后列"。也可以将它设成column,变成"先列后行"。

    13. justify-items属性设置单元格内容的水平位置(左中右)。

    14. align-items属性设置单元格内容的垂直位置(上中下)。

    15. place-items属性是align-items属性和justify-items属性的合并简写形式。

    16. justify-content属性是整个内容区域在容器里面的水平位置(左中右)。

    17. align-content属性是整个内容区域的垂直位置(上中下)。

    18. place-content属性是align-content属性和justify-content属性的合并简写形式。

    19. grid-auto-columns属性和grid-auto-rows属性用来设置浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高

    20. grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

    项目属性:

    1. grid-column-start属性:左边框所在的垂直网格线
      grid-column-end属性:右边框所在的垂直网格线
      grid-row-start属性:上边框所在的水平网格线
      grid-row-end属性:下边框所在的水平网格线
    2. grid-column属性是grid-column-start和grid-column-end的合并简写形式,grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
    3. grid-area属性指定项目放在哪一个区域。
    4. justify-self属性设置单元格内容的水平位置(左中右)
    5. align-self属性设置单元格内容的垂直位置(上中下)
    6. place-self属性是align-self属性和justify-self属性的合并简写形式。

    参考

    容器和项目

    • 容器:采用网格布局的区域

      display: grid;
      // or
      display: inline-grid;
      
    • 项目:容器内部顶层子元素,不包含项目的子元素

    容器属性

    项目属性

    设为网格布局以后,容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

    响应式布局

    用一套代码,针对不同的屏幕尺寸,做不一样的布局适配。

    响应式与自适应的区别:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vvnqODy4-1602206449768)(media/16012895525245/16013092251188.jpg)]

    响应式布局的几种方式:

    1. 媒体查询
      选择分隔点:480px,800px,1400px[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-entLXVZL-1602206449769)(media/16012895525245/16013038619741.jpg)]
      具体按实际情况再做分隔。

      写法:
      随着屏幕宽度的变大或变小,后面的样式覆盖前面的样式。
      宽度由大到小,用max-width:

      /* 宽度由大到小,用max-width */
      /* 宽度小于等于 1400px */
      @media screen and (max-width: 1400px) {
          .left {
              background-color: blue;
          }
          .right {
              background-color: red;
          }
      }
      /* 宽度小于等于 800px */
      @media screen and (max-width: 800px) {
          .left {
              background-color: pink;
          }
          .right {
              background-color: darkgreen;
          }
      }
      /* 宽度小于等于 480px */
      @media screen and (max-width: 480px) {
          .right, .left {
              float: none;
              width: 100%;
              height: 100px;
          }
      }
      

      宽度由小到大,用min-width:

      /* 宽度由小到大,用min-width */
      /* 宽度大于等于480 */
      @media screen and (min-width: 480px) {
          .left {
              background-color: pink;
          }
          .right {
              background-color: darkgreen;
          }
      }
      /* 宽度大于等于 800px */
      @media screen and (min-width: 800px) {
          .left {
              background-color: blue;
          }
          .right {
              background-color: red;
          }
      }
      /* 宽度大于等于 1440px */
      @media screen and (min-width: 1440px) {
          .right, .left {
              float: none;
              width: 100%;
              height: 100px;
          }
      }
      
    2. 百分比布局

      各属性用百分比作值的话,相对于自身的父元素对应的属性并不全是对应的:

      • 子元素的padding如果设置百分比,不论是垂直方向或者是水平方向,都相对于直接父亲元素的width,而与父元素的height无关。

      • 子元素的margin如果设置成百分比,不论是垂直方向还是水平方向,都相对于直接父元素的width

      • border-radius不一样,如果设置border-radius为百分比,则是相对于自身的宽度

      • 子元素的top和bottom如果设置百分比,则相对于直接非static定位(默认定位)的父元素的高度,同样,子元素的left和right如果设置百分比,则相对于直接非static定位(默认定位的)父元素的宽度。

      相比来说考虑的内容较为复杂,所以不建议使用

    3. rem布局

      • rem 是CSS3新增的单位,并且移动端的支持度很高
      • 1rem 等于 根元素设置的font-size的 px 值。比如 html{font-size:16px;} ,那么 1 rem = 16px。
      • 当页面的 size 发生变化时,只需要改变 font-size 的值,那么以rem为固定单位的元素的大小也会发生响应的变化,对字体也有影响
      • rem 的响应式布局,可以根据容器的大小,动态改变根元素html的font-size的大小来实现。

      实现:

      1. 利用媒体查询来改变font-size

        @media screen and (max-width: 1400px) {
          html {
            font-size: 18px
          }
        }
        
        @media screen and (max-width: 800px) {
          html {
            font-size: 16px
          }
        }
        

        tip:这种写法比较僵硬,没有过度

      2. 用 js
        当前根元素的字体大小 = 设计稿的字体大小 * 当前设备宽度 / 设计稿的宽度

        function fontSizeFun (designwidth) {
            let fontSize = 100
            let relwidth = document.documentElement.clientWidth
            let relfontSize = fontSize * relwidth / designwidth + 'px'
            document.getElementsByTagName('html')[0].style.fontSize = relfontSize
        }
        
        //首次加载应用,设置一次
        fontSizeFun(750)
        // 监听手机旋转的事件的时机,重新设置
        window.addEventListener('orientationchange', fontSizeFun(750))
        // 监听手机窗口变化,重新设置
        window.addEventListener('resize', fontSizeFun(750))
        

    em,rem,vw(vh)单位的区别

    1. rem 单位都是相对于根元素html的font-size来决定大小的

    2. em 同百分比一样,相对于父元素计算

    3. vw:1vw 等于视口宽度的1%,vh:1vh 等于视口高度的1%

    4. vmin:选取 vw 和 vh 中最小的那个,即在手机竖屏时,1vmin=1vw

    5. vmax:选取 vw 和 vh 中最大的那个 ,即在手机竖屏时,1vmax=1vh

    viewport的作用

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    
    • width=device-width: 是自适应手机屏幕的尺寸宽度。

    • maximum-scale: 是缩放比例的最大值。

    • minimum-scale: 是缩放比例的最小值。

    • inital-scale: 是缩放的初始化。

    • user-scalable: 是用户的可以缩放的操作。

    响应式布局需要注意点

    • 设置 viewport
    • 注意兼容性
    • 配合媒体查询
    • 字体需要适配(rem)
    • 图片适配([移动端多配图的适配](https://www.yuque.com/docs/share/55fbe73b-63cf-4358-a1f7-c5a9c12a7429?# 《移动端多倍图适配》))
    • 页面布局可配合flex,grid
    • 可使用现成的UI框架(Bootstrap

    作业(国庆假期)

    1. 用网格布局实现一个布局:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cf74oPh3-1602206449771)(media/16012895525245/16013571234690.jpg)]

    2. 完善网格布局文档

    3. 实现hover动画

      1. 放大缩小变化
      2. 形状变化
      3. 旋转变化
      4. 位移变化
      5. 边框、阴影变化
      6. 颜色变化
    4. 游戏猫官网静态页面开发:http://www.youximao.com/

    展开全文
  • 响应式布局 导航条为例

    千次阅读 2018-03-12 15:35:30
    响应式布局根据屏幕的不同尺寸,应用不同的CSS规则。让不同尺寸的设备显示不同的效果。我们可以通过媒体查询实现响应式布局,CSS3提供了媒体查询,可以判断当前的可视区域的大小。大屏和超大屏幕效果图:即(电脑...
  • bootstrap响应式布局案例
  • 响应式登陆表单 垂直浏览器窗口大小查看效果, 在屏幕宽度尺寸小于 650px 时,设置两列的布局上下堆叠显示。 (复制代码,在浏览器打开,即可查看效果) &lt;!DOCTYPE html&gt; &lt;html&gt; &...
  • 2,响应式布局之间存在不同屏幕尺寸的限制,使用样式相互不影响(满足当前屏幕尺寸时,该样式块起作用,不满足时,则样式块失效) 3,当相应式布局中样式块起作用时,会与正常样式块协同布局,遵循选择器的有限级规则 ...
  • Vue实战篇十:响应式布局

    千次阅读 2020-11-06 14:36:35
    Vue实战篇八:实现弹出对话框进行交互 Vue实战篇九:使用省市区级联选择插件 Vue实战篇十:响应式布局 文章目录 系列文章目录 一、背景 二、 Element组件的响应式布局 2.1 定义 2.2 响应式布局实例 一、背景 响应式 ...
  • Bootstrap响应式布局

    2021-03-06 22:33:00
    Bootstrap是最受欢迎的HTML、CSS和JS框架,用于开发响应式布局、移动设备优先的WEB项目。 可以帮助我们快速布局和美化页面 2.为什么使用 Bootstrap? 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的...
  • 一、响应式布局 1、概念 响应式又叫自适应网页,可以根据网页窗口的调整而自动布局,不会导致页面效果的错乱,主要是针对移动端浏览器;通过响应式布局,可以使一套代码同时兼容多个尺寸的屏幕 2、响应式网页的构成 ...
  • 响应式布局: 同一套页面可以兼容不同分辨率的设备。 实现:依赖于栅格系统:将一行平均分为12个格子,可以指定元素占几个格子, 步骤: 1.定义容器。相当于之前的table 容器分类: 1.container:两边有留白...
  • 导航栏的响应式布局

    2020-04-22 17:58:24
    } li:hover{ background-color:#ed4040; border-radius: 5px; } @media screen and (max-width:1536px){ a{ font-size:1rem; } } @media screen and (max-width:1024px){ a{ font-size:1.5...
  • bootstrap响应式布局练习 在三种不同的屏幕下呈现不同的效果 大屏(pc端) 小屏下(平板) 超小屏(手机) html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <...
  • 这种布局方式除了是很常见的面试题,更重要的,他还是很常见的一种页面布局。因此必须要掌握几种制作情况。这里我先列出几种我总结的,可能有些不足,希望大家也可以留言补充,我再整理成更完善的。在分条展示实现...
  • 响应式布局媒体查询

    2021-01-21 16:25:26
    -- 响应式设计的网页: ① 移动端优先 ② 渐进增强 --> <!-- 外部容器 --> <div class="top-bar-wrapper"> <div class="top-bar"> <!-- 左侧菜单 --> <div class="left-menu"> <!-- 创建菜单图标 --> ...
  • HTML5响应式布局规范

    2021-06-11 00:50:19
    常用命名汇总: 站点:site 首页:homepage 当前位置:currentPath 二级页面/子页面:subpage 布局:layout 搜索:search 网页头部:head/header 登录条:loginbar 标志:logo 侧栏:side/sidebar 广告条:banner 导航:...
  • 静态布局(Static Layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)...
  • 响应式布局

    2020-01-14 19:20:17
    网页布局 网页布局有很多种方式,一般分为以下几个部分、头部区域、菜单导航区域、内容区域、底部区域。如下图: 头部区域位于整个网页的顶部,一般用于设置网页的标题或者网页的logo。菜单导航区域包含了一些...
  • 1.2 响应式布局容器 响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。 原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到...
  • WEB前端响应式布局之BootStarp使用

    千次阅读 多人点赞 2019-05-27 22:44:39
    4. 响应式布局 5. CSS样式和JS插件 1.Bootstrap简介: 1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web ...
  • 这种布局方式除了是很常见的面试题,更重要的,他还是很常见的一种页面布局。因此必须要掌握几种制作情况。这里我先列出几种我总结的,可能有些不足,希望大家也可以留言补充,我再整理成更完善的。在分条展示实现...
  • 哈喽,我又来了,vue想必大家都用的挺多...为了增加点难度,我会加入响应式布局,代码如下: //home <template> <div class="home"> <div class="home_header"> <div>admin</div> &l
  • 1. 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 设备的划分情况: 设备 尺寸区间 超小屏幕(手机) < 768px 小屏设备...
  • 响应式布局 1.啥叫响应式:根据浏览器页面的设备不同 自动的改变布局 图片 文本 不会影响体验 2.编写响应式的网页: (1)视口 <meta name="viewport" content="width=device-width, initial-scale=1.0, ...
  • 响应式布局 * 同一套页面可以兼容不同分辨率的设备。 * 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子 * 步骤: 1. 定义容器。相当于之前的table、 * 容器分类: 1. ...
  • 流体式布局与响应式布局View demo 查看演示Download Source 下载源Today we want to show you how to create a horizontal layout with several content panels. The idea is to make each ...
  • 响应式项目7-1项目描述

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,112
精华内容 3,244
关键字:

响应式布局hover