多端响应，移动端响应

最新推荐文章于 2024-09-07 10:28:06 发布

WYWEBGO

最新推荐文章于 2024-09-07 10:28:06 发布

阅读量199

点赞数 1

分类专栏：知识点文章标签：移动开发 html

本文链接：https://blog.csdn.net/WYWEBGO/article/details/107831578

版权

知识点专栏收录该内容

2 篇文章 0 订阅

订阅专栏

移动端响应
需要在meta中，设置content=“width=750,user-scalable = no” ,这样就能控制不管在那种机型中，都能控制物理分辨率为750px
多端响应
利用媒体查询 @media screen
使用媒体查询时，必须加上meta viewport标签
demo示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1.user-scalable=no">
    <title>Document</title>
    <style>
        .d1 {
            width: 25%;
            height: 200px;
            background: skyblue;
        }

        /* 媒体查询 */
        /* 移动端设定 */
        /* 设定小于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: yellowgreen;
            }
        }

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

        /* 使用媒体查询必须加上meta viewport标签 */
    </style>
</head>

<body>
    <div class="d1">

    </div>

</body>

</html>

WYWEBGO

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多端响应，移动端响应

移动端响应需要在meta中，设置content=“width=750,user-scalable = no” ,这样就能控制不管在那种机型中，都能控制物理分辨率为750px多端响应利用媒体查询 @media screen使用媒体查询时，必须加上meta viewport标签demo示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta na
复制链接

扫一扫

专栏目录