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  快捷方式
    
  • 相关阅读:
    MySQL Explain优化
    mysql联合索引
    MySQL索引类型
    php常用的排序算法与二分法查找
    mysql 主从复制(mysql双机热备的实现)
    mysql 主从复制 (2)
    Linux 查看进程之PS命令
    PHP isset 和 array_key_exists 对比
    Linux md5sum 的用法
    Linux Sphinx 安装与使用
  • 原文地址:https://www.cnblogs.com/swjblog/p/9858994.html
Copyright © 2011-2022 走看看