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. Qt5—嵌入停靠窗口QDockWidget

    参考链接:http://blog.csdn.net/summer_xiyer/article/details/12875899 新建一个GUI工程: QDockWidget是QWidget的子类,也等 ...

  2. 查看tomcat的内存情况

    查看现有tomcat的内存大小情况 1.启动tomcat 2.访问 http://localhost:8080/manager/status ,并输入您在安装tomcat时输入的用户与口令,如 adm ...

  3. span可编辑 属性 html 可编辑td

    <span contenteditable="true">11111111111111111</span> <!DOCTYPE html PUBLIC ...

  4. Dynamics CRM 使用 Profiler 来做debug

    首先,我们需要install Profiler 我们选中一个plugin, 并且选择start Profilling 然后我们选择Persist to Entity 然后我们执行trigger这个pl ...

  5. Day 10 函数

    函数 1.什么是函数? 函数就是具备某一功能的工具,事先将工具准备好就是函数的定义,遇到应用场景拿来就用就是函数的调用 2.为何用函数? 如果不使用函数,写程序会遇到这三个问题 1.程序冗长 2.程序 ...

  6. 小白学习Spark系列一：Spark简介

    由于最近在工作中刚接触到scala和Spark,并且作为python中毒者,爬行过程很是艰难,所以这一系列分为几个部分记录下学习<Spark快速大数据分析>的知识点以及自己在工程中遇到的小 ...

  7. 用CSS来控制字符长度和显示长度

    在网页排版设计中,会遇到文本超过固定长度导致整体的网页变形的情况.程序员往往需要截取固定的长度来实现某些固定长度的控制.介绍一种直接采 用CSS的代码控制来实现文本截取的方法,与程序员的直接字符截取的 ...

  8. PHP面向对象(二)

    7 多态 多态: 多种形态 多态分俩种: 方法重写和方法加载 7.1 方法重写 子类重写了父类的同名的方法 <?php class Person{ public function show(){ ...

  9. WebService学习总结（6）——WebService常用接口

    商业和贸易:1.股票行情数据 WEB 服务(支持香港.深圳.上海基金.债券和股票:支持多股票同时查询) Endpoint: http://webservice.webxml.com.cn/WebSer ...

  10. BA-楼宇自控系统设计论文（转载）潘翌庆 元晨

    楼宇自控系统设计 潘翌庆 元晨 一.概述 楼宇自控系统(Building Automation System-BAS)是智能建筑中不可缺少的重要组成部分,在智能建筑中占有举足轻重的地位.它对建筑物内部 ...