zoukankan      html  css  js  c++  java
  • 移动web中的流式布局和viewport知识介绍

    1   流式布局

    其实  流式布局  就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。

    这样的布局方式  就是移动web开发使用的常用布局方式

    2    Viewport

    1. 我们猜想下pc页面在移动设备上显示情况。

    放不下,缩放?

    1. 我们测试下pc页面在移动设备上显示。

    默认的缩放的显示的

    1. 认识viewport

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

    width:宽度设置的是viewport宽度,可以设置device-width特殊值

    initial-scale:初始缩放比,大于0的数字

    maximum-scale:最大缩放比,大于0的数字

    minimum-scale:最小缩放比,大于0的数字

    user-scalable:用户是否可以缩放,yes或no(1或0);

    用meta标签把viewport的宽度设为device-width,同时initial-scale=1,user-scalable = 0就构建了一个标准的移动web页面

  • 相关阅读:
    2017年第八蓝桥杯C/C++ A组国赛 —— 第二题:生命游戏
    451. 根据字符出现频率排序
    剑指 Offer 40. 最小的k个数
    list使用详解
    STL---priority_queue
    1046. 最后一块石头的重量
    739. 每日温度
    921. 使括号有效的最少添加
    STL----stack
    173. 二叉搜索树迭代器
  • 原文地址:https://www.cnblogs.com/lsy0403/p/5875235.html
Copyright © 2011-2022 走看看