6月24日实训报告

最新推荐文章于 2024-08-23 15:53:59 发布

P1nkSpid3r

最新推荐文章于 2024-08-23 15:53:59 发布

阅读量59

点赞数

分类专栏：在这理发店文章标签： html 前端 css

本文链接：https://blog.csdn.net/L978305126/article/details/125451627

版权

在这理发店专栏收录该内容

6 篇文章 0 订阅

订阅专栏

viewport ：用户网页的可视区域. width：控制viewport的大小，可以指定一个值，如600，或者特殊的值，如device-width为设备的宽度（单位为缩放100%时的CSS的像素）。 height：和 width 相对应，指定高度。 initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale：允许用户缩放到的最大比例。 user-scalable：用户是否可以手动缩放。

移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。

早期网页设计采用静态布局，通过<meta>标签中的applicable-device应用设备标识识别移动设备，即<meta name = 'applicable-device' content = 'mobile'>，在<meta>标签中的viewport标签中设置width，通过js动态修改标签的initial-scale使得页面等比缩放，刚好占满整个屏幕。一些文章中有提到静态布局中页面各个元素采用px为单位，这种方案实现简单，不存在兼容性问题，但用户体验很不友好。

后面出现流式布局，使用百分比%定义宽度，高度使用px固定，根据可视区域大小实时进行尺寸调整，通常使用max-width/min-width控制尺寸范围过大或者过小。这种方案实现比较简单，但在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。

顺应不同页面字体大小展现问题，出现了弹性布局。这种布局方案下，包裹文字的元素的尺寸采用em/rem为单位，页面主要划分区域的尺寸依据情况使用px、百分数或者em/rem。如一些高校的网站 jlu，页面的主要划分区域使用px和百分比，包裹文字的元素和文字采用em。

上面的这几种方案下，页面元素的大小按照屏幕分辨率进行适配调整，但是整体布局不变，对于响应式web设计，网页布局会随着访问它的视口及设备的不同呈现不同的样式，在实现上可能会以上多种方案的结合，同时搭配 媒体查询 技术使用，使得一个页面在多个终端 (PC, mobile, pad) 呈现满意效果，如 mashable 。

<!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>
</head>
<style>
   body{
    background: rgb(244, 236, 236);
   }
    .page{
        
        height: 90px;
        background: white;
        width: 800px;
        display: flex;
        text-align: center;
        margin: 0 auto;
        border-radius: 10px;
    }
    p{
        margin: 0;
    }
    .page-1{
        flex: 1;
        
    }
    .page-2{
        flex: 1;
    }
    .page-3{
        flex: 1;
    }
    .page-4{
        flex: 1;
    }
    .page-5{
        flex: 1;
    }
      
    
</style>
<body>
    <div class="page">
        <div class="page-1">
            <img src="01.png">
            <p>景点.玩乐</p>
        </div>
        <div class="page-2">
            <img src="02.png">
            <p>周边游</p>
        </div>
        <div class="page-3">
            <img src="03.png">
            <p>美食林</p>
        </div>
        <div class="page-4">
            <img src="04.png">
            <p>一日游</p>
        </div>
        <div class="page-5">
            <img src="05.png">
            <p>当地攻略</p>
        </div>
    </div>
</body>
</html>

P1nkSpid3r

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6月24日实训报告

viewport ：用户网页的可视区域. width：控制viewport的大小，可以指定一个值，如600，或者特殊的值，如device-width为设备的宽度（单位为缩放100%时的CSS的像素）。 height：和 width 相对应，指定高度。 initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale：允许用户缩放到的最大比例。 user-scalable：用户是否可以手动缩放。...
复制链接

扫一扫