CSS中响应式开发—几个概念，开发原理，媒体查询，代码演示

燕穗子博客

已于 2022-06-09 22:12:50 修改

阅读量655

点赞数 2

分类专栏： CSS 文章标签： css java 开发语言 vscode javascript

于 2022-04-14 10:52:53 首次发布

本文链接：https://blog.csdn.net/m0_64346035/article/details/124165768

版权

CSS 专栏收录该内容

49 篇文章 6 订阅

订阅专栏

一、响应式开发

1. web网页布局分类

固定宽度的布局：给网页设置一个固定的宽度，通常以px作为单位，常见于PC端web开发。
流式布局：给网页设置一个相对宽度，通常以百分比作为单位。
栅格布局：像表格一样对页面进行划分，以每一个划分出的单元格为长度单位，比如bootstrap采用的就是栅格化的布局。
响应式布局：通过检测设备信息来决定网页的布局方式，从而使网页可以匹配大部分移动设备和PC端。

2. 响应式应用

响应式开发的结果将是开发出一个能够在多种设备上都能正常展示的网站，响应式开发的网站意味着多种终端共用一套代码，节省了开发时间，节约了开发成本和维护成本，

但同时，它也存在一些缺陷，因为共用一套代码，因此其中部分内容即使移动端并不会展示，但它同样会请求并下载下来，这将拖慢移动端网站的运行速度，使用户的流量开销更大。

其次，要适配不同类型的终端，因此我们不得不写很多冗余的代码，使网站的体积更大。

因此我们要学会针对不同的网站选择不同的开发方式，对于一些博客、官网、新闻等网站，展示内容单一简单，适合使用响应式开发，但是针对一些功能复杂的网站，则不适合。

3.响应式开发前提

（1）.需要了解的几个概念

像素

-屏幕是由一个个发光的小点构成的，这一个个的小点就是像素

-分辨率说的就是屏幕中小点的数量

-在前端开发中像素要分成两种情况讨论，css像素和物理像素

-物理像素，上述所说的小点点就是属于物理像素

-css像素，编写网页时，我们所用的像素都是css像素

-浏览器在显示网页时，需要将css像素转换为物理像素然后再呈现

-一个css像素最终由几个物理像素显示，由浏览器决定

默认情况下，在pc端，一个css像素=一个物理像素

视口（viewport）

-视口就是屏幕中用来显示网页的区域

-可以通过查看视口的大小，来观看css像素和物理像素的比值

-默认情况下：

视口的宽度与屏幕的大小即物理像素相同，所以物理像素跟css像素1:1比例

-放大两倍的情况

css像素跟物理像素的比是1:2

....

我们可以通过改变视口的大小，来改变css像素跟视口的比值

移动端：

运行在移动设备上的产品

移动设备：手机平板 ipad

我们以后做的产品大部分都只需要适配ios系统和安卓系统即可

（2）响应式设计原则

渐近增强

基本需求==>更好体验

优雅降级

完备功能==>向下兼容

移动优先的响应式布局采用的是渐进增强原则

（3）响应式布局三个要素

1:viewport视口设置

2:@meida媒体查询

3:不要写死尺寸

多用百分比宽度来确定布局尺寸

多用rem、em来确定布局尺寸

多用vh、vw来确定布局尺寸

（4）完美视口

每一款移动设备设计时，都有会有一个最佳的像素比，一般我们只要值需要将像素比设置为该值，即可得到一个最佳的效果，将像素比设置为最佳像素比的视口大小，我们称其为完美视口

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 设置视口大小  device-width表示设备的宽度（完美视口）
                     initial-scale 表示页面的初始缩放值
                     user-scalable 是否允许用户缩放
                      -->
    <!-- <meta name="viewport" content="width=300px"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

（5） flexible 解决H5页面终端适配

动态改写<meta>标签

给<html>元素添加data-dpr属性，并且动态改写data-dpr的值

给<html>元素添加font-size属性，并且动态改写font-size的值

使用下载Flexiblehttps://github.com/amfe/article/issues/17

4:响应式开发的原理

（1）媒体查询：

查询媒介，查询到当前屏幕(媒介媒体)的宽度，针对不同的屏幕宽度设置不同的样式来适应不同屏幕。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。简单说，你可以设置不同屏幕下面的不同的样式，达到适配不同的屏幕的目的。

实现响应式布局的一个方法是使用媒体查询，媒体查询即针对不同的设备使用不同的代码，一般的常见设备的尺寸划分如下：

类型	布局宽度
大屏幕	大于等于1200px
默认	大于等于980px
平板	大于等于768px
手机到平板	小于等于767px
手机	小于等于480px

（2）使用媒体查询

语法：@media 查询规则

媒体类型（可以同时用多个媒体类型，用逗号隔开,这样他们之间就是或的关系）

all 所有设备

print 打印设备

screen 带屏幕的设备（电脑，手机）

speech 屏幕阅读器

媒体特性

max-width 视口的最大宽度（视口小于指定宽度时就生效）

min-width 视口的最小宽度（视口大于指定宽度时就生效）

max-height 最大高度

min-width 最小高度

orientation:landscape 横屏

orientation:portrait 竖屏

可以多写，中间用and或者“，”来连接

五：演示代码

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./07页面布局.css" />
  </head>
  <body>
    <div id="wrapper">
      <header>
        <h3>页头</h3>
      </header>
      <nav>
        <h3>导航</h3>
      </nav>
      <main>
        <div class="mainLeft">
          <h4>主体</h4>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum a accusamus alias voluptate voluptatum consequuntur, doloremque quis ipsa nostrum dolore, vel, aspernatur debitis. Cum
            dolorem, voluptate optio rerum delectus incidunt!
          </p>
        </div>
        <div class="mainRight">
          <h4>边栏</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, qui.</p>
        </div>
      </main>
      <footer>
        <h3>页脚</h3>
      </footer>
    </div>
  </body>
</html>

CSS代码

#wrapper {
    text-align: center;
    width: 960px;
    margin: 0 auto;
    margin-top: 50px;
}

header,
nav,
footer {
    height: 100px;
    background-color: #ccc;
    margin-bottom: 20px;
}

main>div {
    float: left;
    margin-bottom: 20px;
    height: 300px;
}

/* 设置主体左侧右侧宽度 */
main>.mainLeft {
    width: 600px;
    margin-right: 20px;
    background-color: aquamarine;
}

main>.mainRight {
    width: 340px;
    background-color: cadetblue;
}

/* 清除浮动影响 */
footer {
    clear: both;
}

/* 监测屏幕放大时变化 */
@media screen and (min-width:1200px) {
    #wrapper {
        width: 1100px
    }

    main>.mainLeft {
        width: 700px;
        margin-right: 30px;
    }

    main>.mainRight {
        width: 370px;
        background-color: cadetblue;
    }
}

/* 流动布局，将写死的宽度变成百分比形式 */
@media all and (max-width:959px) {
    #wrapper {
        width: 100%;
    }

    main>.mainLeft {
        width: 65%;
    }

    main>.mainRight {
        width: 32%;
        float: right;
    }
}

@media all and (max-width:767px) {

    main>.mainLeft,
    main>.mainRight {
        float: none;
        width: 100%;
    }
}

燕穗子博客

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS中响应式开发—几个概念，开发原理，媒体查询，代码演示

一、响应式开发1. web网页布局分类固定宽度的布局：给网页设置一个固定的宽度，通常以px作为单位，常见于PC端web开发。流式布局：给网页设置一个相对宽度，通常以百分比作为单位。栅格布局：像表格一样对页面进行划分，以每一个划分出的单元格为长度单位，比如bootstrap采用的就是栅格化的布局。响应式布局：通过检测设备信息来决定网页的布局方式，从而使网页可以匹配大部分移动设备和PC端。2. 响应式应用响应式开发的结果将是开发出一个能够在多种设备上都能正常展示的网站，响应式开发的网站意味
复制链接

扫一扫