移动端与响应式布局

最新推荐文章于 2024-05-16 13:18:18 发布

希魔王的塔罗牌

最新推荐文章于 2024-05-16 13:18:18 发布

阅读量349

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/Nozomi0609/article/details/108292189

版权

切换设备

浏览器切换设备步骤：
F12开启控制台，如图：
在这里插入图片描述

viewport 视窗的设置

viewport只针对于移动端，PC端无效

<meta name="viewport" 
content="width=device-width, 
initial-scale=1.0, 
maximum-scale=1.0, 
user-scalable=0" />

content的配置：
width=device-width：宽度等于设备宽度，浏览器宽度分辨率等于系统的分辨率
initial-scale=1：初始化比例是1
minimum-scale=1：最小的缩小比例是1
maximum-scale=1：最大的放大比例是1
user-scalable=no：用户不允许缩放

物理分辨率与逻辑分辨率

物理分辨率：即标准分辨率，是指显示屏显示图像的原始分辨率，也叫真实分辨率
逻辑分辨率：即压缩分辨率，显示屏分辨率

决定图像清晰程度的是物理分辨率，决定显示屏的适用范围的是逻辑分辨率
两者间由 Scale Factor（缩放因子） 计算得到
通常物理分辨率 > 逻辑分辨率，而物理分辨率 = 逻辑分辨率 * 缩放因子
但在使用台式电脑和笔记本的情况下物理分辨率 = 逻辑分辨率

PC移动端的响应式布局：适用于PC和移动端的界面

一般情况下，一个项目会分为PC端的页面的移动端的页面
所以要获取设备的信息，用户发送请求中包含了信息

如果想要实现响应式布局
可以利用media设置不同分辨率下各种情况的不同样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端与响应式</title>
    <style>
        .d1{
            width: 50%;
            height: 200px;
            background: skyblue;
            /* padding: 10px; */
        }

        /* 媒体查询 */

        /* 移动端设定 */
        /* 设定小于600像素时候的样式 */
        @media only screen and (max-width: 600px ) {
            .d1{
                width: 100%;
                background: red;
            }
        }

        /* PC端设定 */
        /* 设定大于1200像素时候的样式 */
        @media only screen and (min-width: 1200px) {
            .d1{
                width: 33%;
                background: greenyellow;
            }
        }

        /* 平板设定 */
        /* 设定600~1200px的样式 */
        @media only screen and (min-width: 600px) and (max-width: 1200px){
            .d1{
                width: 50%;
                background: purple;
            }
        }


    </style>
</head>
<body>
    <h1>hello world</h1>
    <div class="d1">响应式1</div>
    <div class="d1">响应式2</div>
    <div class="d1">响应式3</div>
    <div class="d1">响应式4</div>
</body>
</html>

注意：
1、并不是所有的界面都需要移动端和PC端响应，因为如果页面比较复杂，那么代码就会比较凌乱，代码量也会很多。并且不能针对性的设置移动端和PC端的页面
2、使用媒体查询，必须加上meta viewport设置

希魔王的塔罗牌

关注

0
点赞
踩
1

收藏

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

切换设备浏览器切换设备步骤：F12开启控制台，如图：viewport 视窗的设置viewport只针对于移动端，PC端无效content的配置：width=device-width：宽度等于设备宽度，浏览器宽度分辨率等于系统的分辨率initial-scale=1：初始化比例是1minimum-scale=1：最小的缩小比例是1maximum-scale=1：最大的放大比例是1user-scalable=no：用户不允许缩放物理分辨率与逻辑分辨率物理分辨率：即标准分辨率，是指显
复制链接

扫一扫