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. FAQ: SBS 2011. The Windows SBS Manager service terminated unexpectedly

    Symptoms The Windows SBS Manager service is stopped with EventID 7034 every half an hour on SBS 2011 ...

  2. 配置notepad++编程环境

    1. 到 https://sourceforge.net/projects/mingw-w64/files/ 下载MinGW64,解压并移动到C盘根目录 2. 将 C:\MinGW64\bin 加入系 ...

  3. 01-初学总结之《谭浩强C程序设计》

    注:个人针对于课本的易错点进行了相关的整理.整理的不专业,多多见谅. C语言中的易出错的点 这个笔记综合了 0. 常量&变量 常量 整型常量 -345,1000,0 实型常量 1)   十进制 ...

  4. java 常用API 包装 数据

    package com.oracel.demo01; public class Sjzhhm { public static void main(String[] args) { method(); ...

  5. noip 2010 引水入城 贪心 + 搜索

    不难分析出如果有解则每个蓄水厂所能覆盖到的干旱城市一定是连续的.否则,中间那些没被覆盖的部分永远都不能被覆盖到. 当然,每个蓄水厂所覆盖的城市有可能不连续,不过既然有解,则一定都是连续的.我们可以开一 ...

  6. python笔记10-----便捷网络数据NLTK语料库

    1.NLTK的概念 NLTK:Natural language toolkit,是一套基于python的自然语言处理工具. 2.NLTK中集成了语料与模型等的包管理器,通过在python编辑器中执行. ...

  7. Python3爬虫环境配置

    一.包管理工具Anaconda安装 1.安装直接在官网下载最新版本的 https://www.continuum.io/downloads 2.配置环境变量PATH:C:\Users\Administ ...

  8. BA-siemens-symaro传感器简介

    1 传感器的原理 传感器.控制器.执行机构是构成控制系统 3 个要素,传感器的作 用一般用来测量工艺参数,提供给控制器或显示仪表,实现工艺过程的 监测或控制.传感器的类型是按测量参数不同分类的,主要分 ...

  9. Struts文件下载具体解释

    在做项目中上传下载肯定是少不了的,本博文对struts2的下载进行解释并附上部分代码 1.action类 public class FileDownLoadAction extends ActionS ...

  10. maven 创建web项目出错

    错误的信息: .m2/repository/org/apache/maven/archetypes/maven-archetype-webapp/maven-metadata-central.xml ...