参考课件中的练习目录,仿写页脚与主体与思考移动布局中,不写width=device-width, 只写 initial-scale=1.0, 是否可达到同样效果?为什么

1. 参考课件中的练习目录,仿写页脚与主体

<!DOCTYPE html>
<html lang="zh-cn">
<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>移动端通用布局代码</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="font_icon/iconfont.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/footer.css">
</head>
<body>
    <!-- 页眉 -->
    <header>
        <!-- logo -->
        <a class="logo" href="#"><img src="./images/taobao.png" alt=""></a>
        <!-- 搜索框 -->
        <a href="#" class="search">
            <span>寻找宝贝店铺</span>
            <span>搜索</span>
        </a>
        <!-- 签到 -->
        <a href="#" class="iconfont icon-qiandao-xuanzhong"></a>
    </header>
    <!-- 主体 -->
    <main>
        <div class="tag">
            <ul>
                <li><a href="#">
                    <img src="./images/navs/tmxb.webp" alt="">
                    <span>天猫新品</span>
                </a></li>
                <li><a href="#">
                    <img src="./images/navs/jrbk.webp" alt="">
                    <span>今日爆款</span>
                </a></li>
                <li><a href="#">
                    <img src="./images/navs/tmgj.webp" alt="">
                    <span>天猫国际</span>
                </a></li>
                <li><a href="#">
                    <img src="./images/navs/fzlx.webp" alt="">
                    <span>飞猪旅行</span>
                </a></li>
                <li><a href="#">
                    <img src="./images/navs/tmcx.webp" alt="">
                    <span>天猫超市</span>
                </a></li>
                <li><a href="#">
                    <img src="./images/navs/tbch.webp" alt="">
                    <span>淘宝吃货</span>
                </a></li>
                <li><a href="#">
                    <img src="./images/navs/sqk.webp" alt="">
                    <span>省钱卡</span>
                </a></li>
                <li><a href="#">
                    <img src="./images/navs/ltjb.webp" alt="">
                    <span>领淘宝金币</span>
                </a></li>
                <li><a href="#">
                    <img src="./images/navs/alpm.webp" alt="">
                    <span>阿里拍卖</span>
                </a></li>
                <li><a href="#">
                    <img src="./images/navs/fl.webp" alt="">
                    <span>分类</span>
                </a></li>
            </ul>
        </div>
        <div class="shop">
            <ul>
                <li><a href="#">
                    <img src="./images/items/item-1.webp" alt="">
                    <div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
                    <div class="price">
                        <span>￥ 10.8</span>
                        <span>100+人已购买</span>
                    </div>
                </a></li>
                <li><a href="#">
                    <img src="./images/items/item-2.webp" alt="">
                    <div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
                    <div class="price">
                        <span>￥ 10.8</span>
                        <span>100+人已购买</span>
                    </div>
                </a></li>
                <li><a href="#">
                    <img src="./images/items/item-3.webp" alt="">
                    <div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
                    <div class="price">
                        <span>￥ 10.8</span>
                        <span>100+人已购买</span>
                    </div>
                </a></li>
                <li><a href="#">
                    <img src="./images/items/item-4.webp" alt="">
                    <div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
                    <div class="price">
                        <span>￥ 10.8</span>
                        <span>100+人已购买</span>
                    </div>
                </a></li>
                <li><a href="#">
                    <img src="./images/items/item-5.webp" alt="">
                    <div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
                    <div class="price">
                        <span>￥ 10.8</span>
                        <span>100+人已购买</span>
                    </div>
                </a></li>
                <li><a href="#">
                    <img src="./images/items/item-6.webp" alt="">
                    <div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
                    <div class="price">
                        <span>￥ 10.8</span>
                        <span>100+人已购买</span>
                    </div>
                </a></li>
            </ul>
        </div>
    </main>
    <!-- 页脚 -->
    <footer>
        <a href="#" class="iconfont icon-taobao"></a>
        <a href="#" class="iconfont icon-gouwuche"><span>购物车</span></a>
        <a href="#" class="iconfont icon-wode"><span>我的淘宝</span></a>
    </footer>
</body>
</html>

header {
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: grid;
    /* 1行三列 */
    grid-template-columns: .58rem 1fr .33rem;
    grid-auto-rows: 0.5rem;
    place-items: center;
    gap: 0.1rem;
    background: #f4f4f4;
}
header a.logo {
    padding-left: .1rem;
}
header > a.search {
    width: 100%;
    border: 1px solid #ff5000;
    height: .35rem;
    border-radius: .3rem;
    display: flex;
    place-content: space-between;
    place-items: center;
}
header > a.search> span:first-child{
    padding-left: .1rem;
}
header > a.search> span:last-child{
    padding: .06rem .2rem;
    margin-right: .01rem;
    /* 渐变 */
    background: linear-gradient(to left,#ff5000,#ffc000);
    color: #fff;
    border-radius: .3rem;
}
header > a.iconfont {
    color: #ff5000;
    font-size: .24rem;
}
footer{
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
header,
footer{
    height: 50px;
    position: fixed;
}
main{
    position: relative;
    top: 50px;
}
main .tag >ul {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: .70rem .70rem;
    text-align: center;
    background-color: #fff;
    border-radius: .12rem;
    margin-top: .1rem;
    gap: .01rem;
}
main .tag >ul li img{
    width: .61rem;
}
main .shop > ul {
    margin-top: .1rem;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: .1rem;
}
main .shop > ul li {
    background-color: #fff;
    border-radius: .12rem;
    overflow: hidden;
}
main .shop > ul li .title{
    padding: .1rem;
}
main .shop > ul li .price {
    padding: .1rem;
}
main .shop > ul li .price span:first-child{
    color: #ff5000;
    font-size: .14rem;
}
main .shop > ul li .price span:last-child{
    margin-left: .1rem;
}

效果图：

2. (附加)思考, 移动布局中,不写width=device-width, 只写 initial-scale=1.0, 是否可达到同样效果?为什么

a.当只设置width属性值，而不指定initial-scale属性值时，大多数浏览器会自动缩放。

当只设置width属性值，而不指定initial-scale属性值时，大多数浏览器会自动缩放。
如果width属性值大于理想视口宽度，则视觉视口放大为width的值，计算得到scale小于1.0；

如果width属性值小于理想视口宽度，则视觉视口缩小为width的值，计算得到scale大于1.0；

这么做的目的是让设备屏幕把完整的页面呈现出来（页面横向塞满屏幕，计算得到scale），

布局视口 = 视觉视口 = 理想视口/缩放比例

b.当只指定initial-scale属性，而不设置width属性时，浏览器会将布局视口宽度设置为视觉视口宽度，以将页面正好铺满屏幕。因为initial-scale属性用于设置页面初始的缩放比例，缩放比例为理想视口与视觉视口的比值。当指定initial-scale = 1，而不设置width属性时，大部分浏览器会将布局视口宽度设置为设备理想视口宽度。

因为：initial-scale = 1.0
所以：视觉视口 = 理想视口 / .0 =理想视口
又因为： 没有设置width
所以：视觉视口 = 布局视口
所以：视觉视口 = 布局视口 = 理想视口

综上所述，只写initial-scale = 1.0可以达到同样效果

参考课件中的练习目录,仿写页脚与主体 与思考移动布局中,不写width=device-width, 只写 initial-scale=1.0, 是否可达到同样效果?为什么

1. 参考课件中的练习目录,仿写页脚与主体

2. (附加)思考, 移动布局中,不写width=device-width, 只写 initial-scale=1.0, 是否可达到同样效果?为什么

相关文章