viewport/流式布局

最新推荐文章于 2023-06-08 18:26:53 发布

Leemin_ios

最新推荐文章于 2023-06-08 18:26:53 发布

阅读量555

点赞数 1

分类专栏：移动web开发案例

本文链接：https://blog.csdn.net/Leemin_ios/article/details/52119416

版权

移动web开发案例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在《京东商城》移动站中是用的是百分比自适应布局，也就是流式布局。

同时，需要对移动端的viewport视口进行设置。就能达到适配的目的。

viewport 概念

在移动端用来承载网页的这个区域，就是我们的视觉窗口，viewport（视口），这个区域可是设置高度宽度，可是按比例放大，缩小。而且能设置是否允许用户自行缩放。

网页呈现在viewport里，在viewport呈现在浏览器中，控制viewport层，使其放大缩小。而且能设置是否允许用户自行缩放。

<head lang="en">
    <meta charset="UTF-8">
    <!-- m viewport 只有移动端才识别-->
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0"
            />
    <title></title>
</head>

<head lang="en">
    <meta charset="UTF-8">
    <!-- viewport 只有移动端才识别，在PC端不认识viewport-->
    <!--
    设置宽度 width 设置成和设备一样的宽度 width ＝ device-width
    设置默认的缩放比例 initial-scale ＝ 1.0
    设置是否允许用户自行缩放 user-scalable=0/no  1/yes
    -->

    <!-- 总结
    用meta标签把viewport的宽度设为device－width，同时initial－scale ＝ 1.0
    user－scalable＝0就构建了一个标准的移动web页面。
    -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <title></title>
    <style>
        body
        {
            margin: 0;
            padding: 0;
        }
        div{
        <!-- 宽度百分比，流式布局，像两侧扩展-->
        width: 100%;
        margin: 0 auto;
        height: 1000px;
        background:red;
        }
    </style>
</head>

viewport 参数

width ： 宽度设置的是viewport 宽度。可以设置device-width特殊值。
initial-scale : 初始缩放比，大于0的数字。
maximum-scale : 最大缩放比，大于0的数字。
minimum-scale : 最小缩放比，大于0的数字。
user-scalable : 用户是否可以缩放，yes或no（1或0）；

Leemin_ios

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
viewport/流式布局

在《京东商城》移动站中是用的是百分比自适应布局，也就是流式布局。同时，需要对移动端的viewport视口进行设置。就能达到适配的目的。viewport 概念在移动端用来承载网页的这个区域，就是我们的视觉窗口，viewport（视口），这个区域可是设置高度宽度，可是按比例放大，缩小。而且能设置是否允许用户自行缩放。
复制链接

扫一扫