22-响应式布局

最新推荐文章于 2023-06-20 16:33:18 发布

故事予你

最新推荐文章于 2023-06-20 16:33:18 发布

阅读量186

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_55101030/article/details/126960240

版权

响应式布局

常见的布局

固定布局

原理：主要内容区域基本不会发生改变，是固定尺寸（比如常见宽度980~1200px），在水平居中
一般应用在pc端，一般中间固定，两边自适应(利用margin:0 auto )。从原稿开始分析，分析网页结构，确定中间内容区域多大，两边在开发过程中自适应。
例如：王者荣耀官网https://pvp.qq.com/、携程旅游：https://www.ctrip.com/
好处
- 布局简单，大盒子设置固定宽度，利用margin:0 auto 水平居中，两边自适应
缺点：
- 无适应性（对移动端不友好）
- 会产生水平滚动条

流式布局

为了适应不同的屏幕，主要内容区域以百分比来代替固定的像素，不同的屏幕会有不同的效果，但是无论宽度怎么变化，页面布局不会发生改变。

  <style>
      body{
          min-width:1080px;
      }
      .header{
          width:100%;
          height:90px;
      }
      .wrapper{
          width:90%;
          height:100%;
          margin:0 auto
      }
  </style>
  
  <div class="header">
      <div class="wrapper">
          <div class="logo">  </div>
          <div class="nav"> </div>
      </div>
  </div>

例如：淘宝，京东网
一般配合怪异盒子使用
更多使用在移动端，移动端的屏幕大小都有差异，为了让网页更好显示
好处：
- 对不同的屏幕有一定的适应性
缺点：
- 当屏幕太小了，内容无法查看

响应式布局

原理：利用媒体查询技术，实现不同的设备可以采用不同css代码，即一套代码，多端使用，同时保证无论哪种设备进行访问，都有很良好的用户体验
例子：JQuery 22插件库 https://www.jq22.com/，苹果官网
好处：
- 支持不同屏幕，有很好的适应性
- 良好的用户体验
缺点：
- 大量css代码，开发难度比较大的，维护性下降

移动端布局

原理：专门针对移动单独开发一套html和css代码，其中会大量使用css3提出单位来实现。用于移动端浏览器显示，不适用PC端。
好处：
- 移动端有极好用户的体验
缺点：
- pc端和移动的代码是单独的，代码量比较大

移动端方案选择

注意
- 对于网页设计来说，如果你网页结构比较简单，你可以考虑一步到位，响应式布局来完成。
- 对于复杂的页面来说，我们就必须要单独开发移动端网页，后续通过一些手段自动检测到用户屏幕宽度，来决定加载pc端网页还是移动端网页。
- 移动端网页一般采用百分比+rem+em来实现。参考单位，在移动端不会使用px来作为布局单位。

响应式布局

概念：是指利用媒体查询技术来实现不同设备都有良好用户体验的一种布局方式。核心在于媒体查询
原理很简单，但是应用起来比较麻烦。
响应式布局适合不复杂的页面，如果页面很复杂，不建议使用。

媒体查询

作用：检测当前设备是什么设备
媒体：

在网页中媒体指的是各种设备，比如：电脑，平板，手机，打印机
查询：

检测当前屏幕属于什么设备，以及属于哪种类型，根据这些信息采用对应css代码，能够在不同的屏幕上呈现不同的效果（不同的用户体验）

基本语法

在引入样式的时候，可以规定样式的作用范围

<!-- link引入样式时可以规定样式作用范围  print打印机  screen 电子屏幕彩色屏幕  -->
 <link rel="stylesheet" href="css/style.css" media="only print">

css样式中规定作用范围

@media 设备类型{
    当前设备满足要求后所使用的css代码
}

媒体类型

可以将不同的设备进行分类，可以针对不同的设备来执行不同的代码

值	设备类型
Print	打印设备
Screen	电脑显示器，彩色屏幕（移动设备）
Braille	盲人用点字法触觉回馈设备
Embossed	盲文打印机
All	所有设备
Handhelp	便携设备
Projection	投影设备
Speech	语音或者音频合成器
Tv	电视类型设备
Try	电传打印机或者终端

手机，ipad ，电脑等等设备类型都是screen

媒体特性

概念：是指媒体设别的特性，用来描述设备的特点；设备宽度、高度、识别是横屏还是竖屏
作用：可以通过媒体特性区分pc端还是手机端

常见的媒体特性

值	表达意思
width	网页显示区域完全等于设置的宽度=
height	网页显示区域完全等于设置的高度=
max-width	网页显示区域小于等于设置宽度<=
max-height	网页显示区域小于等于设置高度<=
min-width	网页显示区域大于等于设置的宽度>=
min-height	网页显示区域大于等于设置的高度>=
orientation:landscape	portrait (竖屏模式) \| landscape (横屏模式)

语法：

@media 设备类型 and （媒体特性：值）{
    设备满足条件会使用的css样式
}
例子：
/* 媒体特性需要用小括号包裹 */
/* and 代表并且的意思 */
@media screen and (width: 320px){
    .box {
        width: 400px;
        height: 400px;
        background-color: green;
    }
}
@media screen and (orientation:landscape) {

    .box{
        background-color: orange;
    }

}

and：代表并且的意思

媒体查询关键字

用于媒体特性的连接词，可以将多个媒体特性关联起来

and:并且的意思，即需要同时满足条件

语法：

@media 媒体类型 and （媒体特性：值） and （媒体特性：值）{
    作用的代码
}

@media screen and (min-width:750px) and (max-width:1200px){
    .box{
        background-color: pink;
    }
}

,:代表或者意思，注意是英文的逗号

语法：

@media 媒体类型 and （媒体特性：值）, 媒体类型 and （媒体特性：值）{
    css代码
}

 @media screen and (max-width:750px), screen and (min-width:1200px){
     .box{
         background-color: yellow;
     }
}

注意：,需要注意的是，两边的条件是相对独立的（包括媒体类型），满足其中一个条件即可。

not：代表非的意思，代表否定条件
- 语法：
```
@media not 媒体类型  and （媒体特性：值）{
    css代码
}
```
  - 注意：not否定的是条件，不会否定媒体类型
only:代表仅仅，只用于某个设备比如：only screen
- 代表唯一，一般放在媒体类型前面，就是一种修饰，强调
- only在使用过程中，目前浏览器没有太多的限制，但是在老版本的浏览器，针对某些版本，某些浏览器不支持媒体查询，用only排除。