前端学习第十六课（响应式布局与自适应布局）

最新推荐文章于 2024-04-21 11:48:20 发布

HM-hhxx！

最新推荐文章于 2024-04-21 11:48:20 发布

阅读量3.3k

点赞数 5

文章标签：前端 css3 css

本文链接：https://blog.csdn.net/damadashen/article/details/122536355

版权

1、视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。

1.1布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

在PC端上，布局视口等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，就会出现滚动条。js获取布局视口：document.documentElement.clientWidth | document.body.clientWidth；

1.2视觉视口 visual viewport

visual viewport(视觉视口)：用户正在看到的网页的区域。用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。不管用户如何缩放，都不会影响到布局视口的宽度。js获取视觉视口：window.innerWidth；

1.3理想视口 ideal viewport

布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时，才是理想视口。js获取理想视口：window.screen.width；

meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口

1.4meta标签

语法：

width:正整数或device-width；定义视口的宽度，单位为像素；

height:正整数或device-height；定义视口的高度，单位为像素；

initial-scale：[0.0-10.0];定义初始缩放值；

minimum-scale：[0.0-10.0];定义放大最大比例，它必须小于或等于maximum-scale设置；

maximum-scale：[0.0-10.0];定义缩小最小比例，它必须大于或等于minimum-scale设置；

user-scalable： yes/no;定义是否允许用户手动缩放页面，默认值为yes；

最标准的viewport设置

视口宽度和设备保持一致
视口的默认缩放比例1.0
不允许用户自行缩放
最大允许的缩放比例1.0
最小允许的缩放比例1.0

2.多倍图

2.1物理像素or物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6 是 750* 1334。我们开发时候的1px 不是一定等于1个物理像素的，一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比，在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题。

2.2多倍图

获得设备像素比后，便可得知设备像素与CSS像素之间的比例。也就是window.devicePixelRatio。
一倍图：当这个比率为1:1时，使用1个设备像素显示1个CSS像素。
二倍图：当这个比率为2:1时，使用4个设备像素显示1个CSS像素，
三倍图：当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。
（该部分转载自：https://blog.csdn.net/weixin_44324124/article/details/97240053）

3.自适应布局

自适应布局是网页内容根据设备的不同而进行适应；通过检测视口分辨率，来判断当前访问的设备是pc端、平板还是手机，从而请求服务层，返回不同的页面；需要根据不同使用场景开发多套界面。

3.1使用rem单位实现自适应布局

例如：

该方式在移动端、PC端都起效果，通过计算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>
    <style>
        html{
            font-size: calc(100vw / 3.75);
        }
        div{
            width: 1.875rem;
            height: 1.875rem;
            background-color: skyblue;
            font-size: 0.30rem;
        }
    </style>
</head>
<body>
    <div>
        helloworld
    </div>
</body>
</html>

实现效果：

4.响应式布局

响应式布局是网页的布局针对屏幕大小的尺寸而进行响应；通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；只需要开发一套界面即可适用于所有尺寸及终端。

4.1媒体查询

媒体查询（Media Query）是CSS3新语法。

使用 @media查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

1）语法规范

用 @media开头注意@符号
mediatype 媒体类型
关键字 and not only

media feature 媒体特性必须有小括号包含


@media mediatype and|not|only (media feature) {
    CSS-Code;
}

2）mediatype 查询类型

将不同的终端设备划分为不同的类型，称为媒体类型，有如下值：

all———用于所有设备；

print——用于打印机和打印预览；

scree——用于电脑屏幕，平板电脑，智能手机等

3）关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

and：可以将多个媒体特性连接到一起，相当于“且”的意思。
not：排除某个媒体类型，相当于“非”的意思，可以省略。
only：指定某个特定的媒体类型，可以省略。

4）媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。

注意他们要加小括号包含

5.响应式开发原理

5.1响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

设备的划分情况：

小于768的为超小屏幕（手机）
768~992之间的为小屏设备（平板）
992~1200的中等屏幕（桌面显示器）
大于1200的宽屏设备（大桌面显示器）

5.2响应式布局容器

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

父容器版心的尺寸划分

超小屏幕（手机，小于 768px）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

例如：

<!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>
    <style>
        /* pc端样式，宽度大于1600像素屏幕 */
        @media screen and (min-width:1600px) {
            div {
                font-size: 200px;
                color: slateblue;
            }
        }

        /* 设置手机端样式，宽度小于768像素屏幕 */
        @media screen and (max-width:768px) {
            div {
                font-size: 30px;
                color: tomato;
            }
        }

        /* 设置平板端样式，宽度768-1600像素屏幕 */
        @media screen and (min-width:768px) and (max-width:1600px) {
            div {
                font-size: 80px;
                color: yellow;
            }
        }
    </style>
</head>

<body>
    <div>helloworld!</div>
</body>

</html>

实现效果：

HM-hhxx！

关注

5
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端学习第十六课（响应式布局与自适应布局）

1、视口视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。1.1布局视口 layout viewport一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。在PC端上，布局视口等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能..
复制链接

扫一扫