移动端与响应式

最新推荐文章于 2023-06-13 10:26:55 发布

一只认学的程序猿

最新推荐文章于 2023-06-13 10:26:55 发布

阅读量205

点赞数

分类专栏：前端学习文章标签： html css

本文链接：https://blog.csdn.net/weixin_41706310/article/details/108856830

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

移动端与响应式01

- meta标签的viewport配置：

meta标签的viewport配置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 
        viewport:代表视窗的设置
        content="
            width=device-width,     //宽度等于设备的宽度，浏览器宽度分辨率等于系统分辨率
            initial-scale=1,  //初始化比例是1
            minimum-scale=1,    //最小的缩放比例是1
            maximum-scale=1,    //最大的放大比例
            user-scalable=no    //用户不允许缩放
        "
     -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Document</title>
</head>
<body>
    <h1>hellowWorld</h1>
</body>
</html>

仅对于移动端有效，可以控制用户的缩放程度。
其中还要注意两个概念：物理分辨率与系统分辨率。
以iphone8为例，当使用控制台切换的时候，会看到上方显示的分辨率为375*667。
但实际上，iphone8官方给出的分辨率是750*1334。
其实是因为，为了方便我们人眼看清屏幕上的字体，需要将字体放大，因此会将移动端四个分辨率合成一个分辨率。最终显示的是依靠系统分辨率来显示

将width定死的时候，无论什么移动设备，都会依照于设置的值，这样在设置body中的内容时，就不会因为不同设备不同的分辨率导致界面错位混乱的情况，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=750, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        #d1 {
            width: 375px;
            height: 375px;
            background-color: aqua;
        }
        #d2 {
            width: 750px;
            height: 375px;
            background-color: rgb(109, 121, 121);
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
</body>
</html>

运行可以发现，不管更改什么样的设备，#d1这个div永远占一半的宽度，#d2这个div永远占整个宽度。

一只认学的程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
移动端与响应式

移动端与响应式01meta标签的viewport配置：meta标签的viewport配置：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- viewport:代表视窗的设置 content=" width=device-width, //宽度等于设备的宽度，浏览器宽度分辨率等于系统分辨
复制链接

扫一扫