zoukankan      html  css  js  c++  java
  • Web—11-手机端页面适配

    流式布局:

    就是百分比布局,非固定像素,内容向两侧填充,理解成流动的布局,成为流式布局

    视觉窗口:

    viewport是移动端持有。这是一个虚拟的区域,承载网页的。

    承载关系:浏览器—-》viewport—-》网页

    适配要求:
    1.网页宽度必须和浏览器保持一致
    2.默认显示的缩放比例和PC端保持(缩放比例1.0)
    3.不允许用户自行缩放网页
    
    满足这些要求达到了适配,国际上通用的适配方案,标准的移动端适配方案。
    
    适配设置:
    如果任何设置都没有,默认走的就是viewpoint的默认设置
    去设置新的viewport设置,达到适配的要求。
    <meta name='viewport'>设置视口的标签,在head里面并且应该紧接着编码设置。
    viewport的功能:
        1,width:可以设置宽度(device-width:当前设备的宽度)
        2,height:可以设置高度
        3,initial-scale:可以设置默认的缩放比例
        4,user-scalable:可以设置是否允许用户自行缩放
        5,maximum-scale:可以设置最大缩放比例
        6,minimum-scale:可以设置最小缩放比例
        在<meta name='viewport' content=''> content=''使用以上参数
        1. width=device-width   宽度一致比例是1.0
        2. initial-scale=1.0    宽度一致比例是1.0
        3. user-scalable=no     不允许用户自行缩放  (yes,no  1,0)
        标准适配方案:
                <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
                meta:vp + tab  快捷方式
    
  • 相关阅读:
    cpp 二进制文件读写
    中文词频统计
    文件方式实现完整的英文词频统计实例
    组合数据类型练习,英文词频统计实例上
    英文词频统计预备,组合数据类型练习
    凯撒密码、GDP格式化输出、99乘法表
    字符串基本操作
    条件、循环、函数定义 练习
    turtle库基础练习
    Python基础练习
  • 原文地址:https://www.cnblogs.com/swjblog/p/9858994.html
Copyright © 2011-2022 走看看