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. ObjecT4：On-line multiple instance learning （MIL）学习

    原文链接:http://blog.csdn.net/ikerpeng/article/details/19235391 用到论文,直接看翻译. 文章:Robust object tracking wi ...

  2. Java将数据以Excel文件形式导出后台代码实现

    下面代码实现所需jar包: tomcat-embed-core-8.5.11.jar: commons-lang3-3.0.1.jar: commons-io-2.5.jar: poi-3.9.jar ...

  3. 序列终结者 Splay

    1.注意在 split 和 merge时要特判一下边界, 否则就会出现边界错误的情况. 2.随时都要维护父指针. 3.在更新 maxv 和翻转标记时要判一下左右儿子是否都存在. #include< ...

  4. 死磕itchat源码--__init__.py

    itchat包中的__init__.py是该库的入口:在该文件中的源码如下: # -*- coding: utf-8 -*- from . import content from .core impo ...

  5. C++进阶 STL(1) 第一天 [容器，算法，迭代器] string容器 vector容器 deque容器

    课程大纲 02实现基本原理 容器,算法,迭代器 教室:容器 人:元素 教室对于楼:容器 序列式容器: 容器元素在容器中的位置是由进入容器的时间和地点来决定 序列式容器 关联式容器: 教室中 按年龄排座 ...

  6. IOS - 零碎

    ---恢复内容开始--- 1.模拟器目录: ProjectNameApk.documents.library(cache.preference.cookies).temp 2.Edit-Refacto ...

  7. ACM成长之路

    前几天在网上看到,转过来时刻督促一下自己. ACM队不是为了一场比赛而存在的,为的是队员的整体提高. 大学期间,ACM队队员必须要学好的课程有: l C/C++两种语言 l 高等数学 l 线性代数 l ...

  8. 学习笔记——ST表

    作用: 给定一个数列 ai O(nlogn) 预处理 O(1) 查询区间最值 实现: 定义f(i,j) 为ai开始,包括ai的连续2^j个元素的最值 下面以最大值为例: f(i,j)表示max{ak} ...

  9. vim+astyle安装使用

    astyle下载安装 wget https://sourceforge.net/projects/astyle/files/astyle/astyle%203.1/astyle_3.1_linux.t ...

  10. 各项硬件使用剖析(一)---让你一眼就能区分瓶颈是Memory、processor ORdisk！