响应式设计

也叫响应式布局,响应式开发

实现不同屏幕分辨率的终端上浏览网页的不同展示方式。

响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局,从而在每种设备屏幕宽度下呈现的界面是不同的

响应式布局

原理:

  • 一个网站适配所有终端,实现不同屏幕分辨率下的终端上网页的不同布局;

  • 使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而达到适配不同屏幕的目的

简单的说:

响应式布局是元素随着屏幕发生宽高大小变化 + 盒子布局发生变化

自适应:元素随着屏幕发生宽高大小变化

优缺点

优点:

  • 1、减少工作量,网站、设计、代码、内容都只需要一份,多出来的工作量只是JS脚本、CSS样式做一些改变

  • 2、节省设计、开发、维护成本【不再特定的维护PC页面,移动页面】

  • 3、面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题

缺点:

  • 1、兼容问题(IE8以下不支持)

  • 2、需要加载更多的样式和脚本文件

  • 3、代码累赘,会出现隐藏无用的元素,加载时间加长

  • 4、页面设计比较难于精确定位和控制

  • 5、影响用户体验(一定程度上改变了网站原有的布局结构,会出现用户混淆的情况,)

Bootstrap框架、苹果官网和星巴克官网使用的响应式布局

2、响应式需要的技术 :

1.设置视口标签

2.使用媒体查询

3.响应字体

4.响应图片

5.采用百分比

一、媒体查询

1、标签设置

meta标签的设置

1.虚拟窗口:创建虚拟窗口,自定义窗口的大小和缩放功能,能适应移动设备的屏幕大小

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

2.使用高版本的IE内核浏览器或者Chrome浏览器

<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
​
http-equiv = "X-UA-Compatible":
​
这个是针对ie8以上浏览器的一个属性,ie8以下无法识别。就是说ie8以上浏览器遇到这个属性会执行content的描述,大小写不敏感。

2、使用媒体查询适配对应样式

可以根据设备显示器的特性,来设置不同的css的样式

二、媒体查询的引入方式和语法

1、媒体查询的语法

媒体查询的语法:
        
         @media mediaType and (media feather) {
            选择器 {
                属性名:属性值
            }
        } 
多个条件:
       @media mediaType and (media feather) and (media feather){
            选择器 {
                属性名:属性值
            }
        } 
​
        mediaType:设备类型
        media feather:媒体特性表表达式
​
​
 1.mediaType设备类型:
     all:所有的多媒体设备
     print:打印机或打印预览
     screen:电脑屏幕、平板电脑、智能手机等
     speech:屏幕阅读器等发声设备
​
2.media feather:媒体特性表达式
      width:浏览器的宽度
      height:浏览器的高度
      max-width:最大宽度
      min-width:最小宽度
      device-width:设备宽度
      device-height:设备高度
      max-device-width:最大设备宽度
      min-device-width:最小设备宽度
​
      orientation:设备的窗口朝向
          1.横屏   宽度比高度大   orientation:landscape;
          2.竖屏   高度比宽度大   orientation:portrait;
3.操作符
- and(与、和)
  not: not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)
  only: 用来定某种特别的媒体类型。
​
  /* 除了 speech 设备都可以用*/
    @media not speech {
      body {
        background-color: tomato;
      }
    }
​
    /* 只能在screen设备能用 */
    @media only screen {
      body {
        background-color: yellowgreen;
      }
    }
  • 媒体查询小案例--只在打印设备显示

    <style>
        .txt {
            font-size: 30px;
            display: none;
        }
​
        媒体查询 打印设备 
        @media print {
            .txt {
                display: block;
            }
        }
​
           display: none; 隐藏元素
           display: block; 显示元素
        
    </style>
​
<body>
    <p class="txt">你看不见我,只能在打印设备才能看的见我哦</p>
​
</body>

2、媒体查询的引入方式

1.内部方式引入

 <style>
        body {
            background-color: red;
        }
         横屏:宽大于高 
        @media screen and (orientation: landscape) {
            body {
                background-color: yellow;
            }
        }
         竖屏:高大于宽 
        @media screen and (orientation: portrait) {
            body {
                background-color: pink;
            }
        }
    </style>

2.外链式

 在html的head标签的内部使用link标签引入外部的css文件(后缀名为.css的文件)
    <head>
    <link rel="stylesheet" href="./css/demo.css">
    </head>
​
    body {
        background-color: pink;
    }
    /* 横屏 宽大于高 */
    @media screen and (orientation: landscape) {
        body {
            background-color: tomato;
        }
    }

    /* 竖屏 高大于宽 */
    @media screen and (orientation: portrait) {
        body {
            background-color: yellowgreen;
        }
    }
    <!-- 只有横屏时有样式 -->
    <link rel="stylesheet" href="./css/demo.css" media="screen and (orientation: landscape)"> 
​
    <!-- 只有竖屏时有样式 -->
    <link rel="stylesheet" href="./css/demo.css" media="screen and (orientation: portrait)">

3、媒体查询常见的媒体尺寸设置

通过媒体查询,针对不同的设备的尺寸设置断点来改变布局

屏幕        设备        断点
超小屏幕     手机        <768px
小屏幕       平板        >=768px ~ <992px  
中等屏幕      桌面       >=992px ~ <1200px
大屏幕       桌面        >=1200px       
    
    
常用媒体查询尺寸:
    1200px
    1100px    1000px   1024px
    980px
    768px     720px
    640px
    480px
    375px
    320px
    280px
    

4、移动设备优先

    移动设备优先:超小屏幕 超小型设备(手机,768px以下)
​
    小屏幕  768px-992px
    @media screen and (min-width:768px) { ... } /* 小型设备(平板电脑,768px 以上) */
​
    中等屏幕 992px - 1200px  
    @media screen and (min-width:992px){ ... }/* 中型设备(台式电脑,992px 以上) */
    
    大屏幕  大于1200px
    @media screen and (min-width:1200px){ ... }/* 大型设备(大台式电脑,1200px 以上) */

案例:

    <style>
        /*在移动端看 移动端显示的颜色  768px屏幕以下*/
        body {
            background-color: orange;
        }
        /* 小屏幕  768px-992px  屏幕宽度在768px以上显示的颜色*/
        @media screen and (min-width: 768px) {
            body {
                background-color: yellow;
            }
        }
        /* 中等屏幕  992px - 1200px*/
        @media screen and (min-width: 992px) {
            body {
                background-color: tomato;
            }
        }
        /* 大屏幕  大于1200px*/
        @media screen and (min-width: 1200px) {
            body {
                background-color: pink;
            }
        }
    </style>

5、大屏幕设备优先

   大屏幕设备优先:大屏幕 桌面在1200px以上    大型设备(大台式电脑,1200px 以上)
    中等屏幕 992px-1200px
    @media screen and (max-width:1200px) { ... } /* 中型设备(台式电脑,1200px 以下) */
    小屏幕 768px-992px
    @media screen and (max-width:992px){ ... }/* 小型设备(平板电脑,992px 以下) */
    超小屏幕 768px屏幕以下
    @media screen and (max-width:768px){ ... }/* 超小型设备(手机,768px 以下) */
    或者
   @media screen and (max-width:768px){ ... }/* 超小型设备(手机,767px 以下) */
     /* 注意:此时超小屏幕和小屏幕在768px之间有冲突,怎么解决?
        把超小屏幕的区间降低1px*/

案例:    <style>        /* 屏幕大于1200px显示的颜色 */        body {            background-color: green;       } ​        /* 中等屏幕 992px-1200px 屏幕宽度在1200px以下显示的颜色*/        @media screen and (max-width:1200px) {            body {                background-color: tomato;           }       } ​ ​        /* 小屏幕 768px-992px*/        @media screen and (max-width:992px) {            body {                background-color: pink;           }       }             /* 注意:此时超小屏幕和小屏幕在768px之间有冲突,怎么解决?       把超小屏幕的区间降低1px*/                /* 超小屏幕 768px屏幕以下*/        @media screen and (max-width:767px) {            body {                background-color: orange;           }       }    </style> </head> ​ <body> ​ </body> ​ </html>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值