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页面

移动web中的流式布局和viewport知识介绍的更多相关文章

  1. 2021年3月-第02阶段-前端基础-Flex 伸缩布局-移动WEB开发_流式布局

    移动web开发流式布局 1.0 移动端基础 1.1 浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器. 移动端常见浏览器:UC浏览器, ...

  2. Web前端_流式布局（百分比布局）

    移动Web_流式布局(百分比布局) writer:late at night codepeasant 1(百分比布局) ☞核心知识点 1.流式布局(百分比布局) 2.视口设置 ☞今日目标 1. 能够使 ...

  3. 流式布局和viewport

    流式布局 百分比布局,非固定宽度,内容向两边填充,流动的布局. viewport(视口) PC端的网页在手机端的浏览器显示是不会出现网页的,这是因为移动端的网页不是直接放在移动端的浏览器中,而是放在移 ...

  4. 自定义View(三)--实现一个简单地流式布局

    Android中的流式布局也就是常说的瀑布流很是常见,不仅在很多项目中都能见到,而且面试中也有很多面试官问道,那么什么是流式布局呢?简单来说就是如果当前行的剩余宽度不足以摆放下一个控件的时候,则自动将 ...

  5. Android 自定义View修炼-Android中常见的热门标签的流式布局的实现

    一.概述:在日常的app使用中,我们会在android 的app中看见 热门标签等自动换行的流式布局,今天,我们就来看看如何 自定义一个类似热门标签那样的流式布局吧(源码下载在下面最后给出哈) 类似的 ...

  6. 05-移动web之流式布局

    一.视口 1.常见屏幕知识 设备 解释 描述 宽 屏幕的宽度 - (单位:英寸) 屏幕的宽度 高 屏幕的高度 -(单位:英寸) 屏幕的高度 对角线 屏幕的对角线的长度 英寸 一般说手机尺寸 是指以屏幕 ...

  7. 流式布局&固定宽度&响应式&rem

    我们现在在切页面布局的使用常用的单位是px,这是一个绝对单位,web app的屏幕适配有很多中做法,例如:流式布局.限死宽度,还有就是通过响应式来做,但是这些方案都不是最佳的解决方法. 1.流式布局: ...

  8. Android 自动换行流式布局的RadioGroup

    效果图 用法 使用FlowRadioGroup代替RadioGroup 代码 import android.content.Context; import android.util.Attribute ...

  9. 转：Java图形化界面设计——布局管理器之FlowLayout（流式布局）其他请参考转载出处网址

    http://blog.csdn.net/liujun13579/article/details/7771191 前文讲解了JFrame.JPanel,其中已经涉及到了空布局的使用.Java虽然可以以 ...

随机推荐

  1. 使用Storm实现实时大数据分析！

    随着数据体积的越来越大,实时处理成为了许多机构需要面对的首要挑战.Shruthi Kumar和Siddharth Patankar在Dr.Dobb's上结合了汽车超速监视,为我们演示了使用Storm进 ...

  2. css3 y轴翻转效果

    这个小例子是hover的时候可一看到div沿着y轴转动一圈 思路:css写好动画transiton: all 1s; hover的时候给他一个状态transform:rotateY(180deg); ...

  3. 精通css学习记录

    #字体 * 无衬线字体(Sans-serif):Helvetica,Arial,'Lucida Family',Verdana,Tohoma,'Trebuchet MS'  * 有衬线字体(Serif ...

  4. a rel=noopener

    看vue-element-admin的源码的时候,看到a 标签使用  rel=noopener: 然后就很奇怪这个是干什么用的:然后百度到一篇文章,涨知识了. 个人的理解是:不加 rel=noopen ...

  5. sqlserver重组索引，优化碎片

    dbcc dbreindex('digitlab.dbo.RequestForm','',90) dbcc dbreindex('digitlab.dbo.Requestitem','',90) db ...

  6. centos7 redmine安装过程(转载)

    redmine 部署过程 redmin官方文档写的太烂加上不熟悉ruby搞了半天,回到家后觉得还是记录下好,希望可以帮助有需要的人,少走弯路. 版本说明 下面的版本很重要redmine 版本 3.3 ...

  7. bzoj 1293: [SCOI2009]生日礼物 问题转化 + 性质分析 + 滚动数组优化

    Description 小西有一条很长的彩带,彩带上挂着各式各样的彩珠.已知彩珠有N个,分为K种.简单的说,可以将彩带考虑为x轴,每一个彩珠有一个对应的坐标(即位置).某些坐标上可以没有彩珠,但多个彩 ...

  8. 树（2）-----leetcode(层、深度、节点)

    1.树的类实现: class TreeNode(object): def __init__(self, x): self.val = x self.left = None self.right = N ...

  9. JQ淡入淡出效果

    <script type="text/javascript"> //页面淡入淡出 $(document).ready(function() { $('body').hi ...

  10. There are no packages available for installation. Sublime3解决方法

    最近在学习Vue,在配置sublime3的时候,想要高亮vue的语法,下载点插件 Package Control的时候,总报  There are no packages available for ...