CSS移动端之viewport视口

最新推荐文章于 2023-09-20 21:59:58 发布

九阈

最新推荐文章于 2023-09-20 21:59:58 发布

阅读量247

点赞数

分类专栏： # CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_46048542/article/details/119967808

版权

CSS 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

示例代码：

<meta name="viewport" content="width=device-width, initial-scale=1">
@media screen and (max-width:480px) {
    // some style
}

桌面上视口宽度等于浏览器宽度，但在手机上有所不同。
布局视口。layout viewport手机上为了容纳为桌面浏览器设计的网站，默认布局视口宽度远大于屏幕宽度，为了让用户看到网站全貌，它会缩小网站。默认大小为980像素，可通过document.document.clientWidth获取
视觉视口。visual viewport用户正在看到的网站的区域，与设备屏幕一样宽。
理想视口。当网站是为手机准备的时候使用。使用meta声明。早期iPhone理想视口为320*480px

现代网页需要将layout viewport设置成跟visual viewport等同大小，方便进行网页制作

通过meta标签进行设置，name属性指定viewport值，content属性进行视口设置
width：设置layout viewport 的宽度特定值，device-width表示设备宽。
height：设置layout viewport 的高度特定值，一般不进行设置。
initial-scale：设置页面的初始缩放，一般设为1，为了兼容应同时设置width=device-width。
minimum-scale 设置页面的最小缩放
maximum-scale 设置页面的最大缩放
user-scalable 设置页面能否进行缩放
实战案例

<!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>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        img{display: block;}
        a{text-decoration: none;color: #555555;}
        header{height: 45px;background: #00b38a;font-size: 20px;color: white;text-align: center;line-height: 45px;}
        .login{height: 43px;display: flex;justify-content: space-between;align-items: center;font-size: 14px;}
        .login p{margin-left: 16px;}
        .login div{width: 84px;height: 30px;background: #f5f5f5;margin-right: 15px;text-align: center;line-height: 30px;border-radius: 15px;}
        .login div a{display: block;width: 100%;height: 100%;}
        /* .list{} */
        .list li{height: 90px;border-top: 1px #e8e8e8 solid;display: flex;align-items: center;}
        .list .list_img{width: 60px;margin: 0 10px 0 14px;}
        .list .list_img img{width: 100%;}
        .list .list_info{flex: 1;}
        .list .list_info h2{font-size: 18px;}
        .list .list_info p:first-of-type{font-size: 14px; display: flex;justify-content: space-between;margin-top: 4px;}
        .list .list_info p:first-of-type span:last-of-type{margin-right: 14px;color: #17b994;}
        .list .list_info p:last-of-type{font-size: 12px;color: #888888;margin-top: 8px;}
        .more{height: 50px;background: #fafafa;border-top: 1px #e8e8e8 soild;text-align: center;line-height: 50px;}
        .more  a{display: block;width: 100%;height: 100%;}
        footer{height: 115px;text-align: center;font-size: 12px;line-height: 22px;padding-top: 27px;box-sizing: border-box;margin-bottom: 45px;}
        .tabbar{width: 100%;height: 45px;border-top: 1px #e8e8e8 soild;display: flex;bottom: 0;background: #f6f6f6;font-size: 18px;color: #c2cfcc;}
        .tabber i{font-size: 22px;position: relative;top: 2px;}
        .tabber div{flex: 1;text-align: center;line-height: 45px;}
        .tabber .active{background: #e7f3f0;color: #00b38a;}
    </style>
</head>
<body>
    <header>移动端实战</header>
    <section class="login">
        <p>10秒钟定制职位</p>
        <div><a href="#">去登录</a></div>
    </section>
    <section>
        <ul class="list">  
            <li>
                <div class="list_img">
                    <a href="#"><img src="https://inews.gtimg.com/newsapp_ls/0/11951888347/0" alt=""></a>
                </div>
                <div class="list_info">
                   <h2><a href="#"> 干物妹小埋</a></h2>
                   <p>
                       <span>中级Java开发工程师</span>
                       <span>13k-20k</span>
                   </p>
                   <p>今天 2017</p>
                </div>
            </li>
        </ul>
    </section>
    <section class="more"><a href="#">加载更多</a></section>
    <footer>
        <p>@2021 hello world</p>
        <p>
            <a href="#">移动版</a> .<a href="#">电脑版</a> .<a href="#">回顶部</a>
        </p>
    </footer>
    <section class="tabbar">
        <div class="active"> <i class="iconfont icon-home"></i>职位</div>
        <div> <i class="iconfont icon-sousuo"></i>搜索</div>
        <div> <i class="iconfont icon-wode"></i>我的</div>
    </section>
</body>
</html>

在这里插入图片描述

九阈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS移动端之viewport视口

示例代码：<meta name="viewport" content="width=device-width, initial-scale=1">@media screen and (max-width:480px) { // some style}桌面上视口宽度等于浏览器宽度，但在手机上有所不同。布局视口。layout viewport手机上为了容纳为桌面浏览器设计的网站，默认布局视口宽度远大于屏幕宽度，为了让用户看到网站全貌，它会缩小网站。默认大小为980像素，可通过do
复制链接

扫一扫