HTML——适配方案

最新推荐文章于 2024-08-16 09:48:09 发布

Zjaun

最新推荐文章于 2024-08-16 09:48:09 发布

阅读量1.7k

点赞数

分类专栏： HTML 文章标签： html

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

流式布局：就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，称为流式布局
视觉窗口：viewport,是移动端特有。这是一个虚拟的区域，承载网页的。
承载关系：浏览器---->viewport---->网页
适配要求：
1. 网页宽度必须和浏览器保持一致
2. 默认显示的缩放比例和PC端保持（缩放比例1.0）
3. 不允许用户自行缩放网页
满足这些要求达到了适配，国际上通用的适配方案，标准的移动端适配方案。
- 适配设置：
  如果任何设置都没有，默认走的就是viewport的默认设置
  去设置新的viewport设置,达到适配要求。
  设置视口的标签在head里面并且应该紧接着编码设置
  viewport的功能：
  1. width 可以设置宽度 (device-width 当前设备的宽度)
  2. height 可以设置高度
  3. initial-scale 可以设置默认的缩放比例
  4. user-scalable 可以设置是否允许用户自行缩放
  5. maximum-scale 可以设置最大缩放比例
  6. minimum-scale 可以设置最小缩放比例
  在 content="" 使用以上参数
  7. width=device-width 宽度一致比例是1.0
  8. initial-scale=1.0 宽度一致比例是1.0
  9. user-scalable=no 不允许用户自行缩放（yes，no 1,0）
标准适配方案：
meta:vp + tab 快捷方式

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
     
    <title>Title</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            height:500px;
            background: pink;
        }
    </style>
</head>
<body>
<div class="box">
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>