流式布局

百分比布局，非固定宽度，内容向两边填充，流动的布局。

viewport(视口)

PC端的网页在手机端的浏览器显示是不会出现网页的，这是因为移动端的网页不是直接放在移动端的浏览器中，而是放在移动端的一个虚拟区域中，这个虚拟区域叫做viewport(视觉窗口,视口，视口的宽度一般默认比浏览器宽度大),然后视口进行相应的缩放，最后将视口放在浏览器中。

适配方案

因为viewport默认会进行缩放，所以网页在移动端显示的对用户不友好，所以我们需要进行一些配置来使网页在移动端显示得和pc端一样。

  • 网页宽度必须和浏览器宽度保持一致
  • 默认显示的缩放比例和pc端保持一致(缩放比例为1.0)
  • 不允许用户缩放网页
<head>

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

</head>

viewport主要有6个功能属性

  • width (特殊值: device-width,表示设备屏幕宽度)         设置宽度
  • height          设置高度
  • initial-scale(1:表示不进行缩放)     设置默认的初始化缩放比例
  • user-scalable     设置用户是否可以进行缩放
  • minmium-scale     设置最小缩放比例
  • maxmium-scale     设置最大缩放比例

流式布局和viewport的更多相关文章

  1. 移动web中的流式布局和viewport知识介绍

    1   流式布局 其实  流式布局  就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充. 这样的布局方式  就是移动web开发使用的常用布局方式 ...

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

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

  3. 静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC

    静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...

  4. 浅谈静态布局、流式布局，rem布局，弹性布局、响应式布局

    静态布局: 特点:没有兼容性问题 PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分:移动设备:另外建立移动网站,单独 ...

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

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

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

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

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

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

  8. webapp，liveapp： 流式布局和rem布局

    liveapp场景应用,一般针对的是移动端,近来也是很火,颇有一些感受,拿来分享一下. 页面宽度范围: 一般移动端页面我们的像素范围是320px-640px,最大640px,最小320px,所以设计稿 ...

  9. JAVA 流式布局管理器

    //流式布局管理器 import java.awt.*; import javax.swing.*; public class Jiemian2 extends JFrame{ //定义组件 JBut ...

随机推荐

  1. 页面访问过程及get/post的理解——

    Chrome查看开发者工具面板,常看的一些数据? Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈. Console:记录开发者开发过程中 ...

  2. ARM汇编指令特点

    根据朱有鹏老师课程笔记整理而来: (汇编)指令是CPU机器指令的助记符,经过编译后会得到一串1 0组成的机器码,由CPU读取执行. (汇编)伪指令本质上不是指令(只是和指令一起写在代码中),它是编译器 ...

  3. 关于DataFram的.values

    DataFram类型的变量a,设a有n个样本,m个特征,当执行语句b = a.values后,b为(n, m)的ndarray矩阵类型,当执行c = b.ravel()后,c为(n*m,)维行向量

  4. [开发技巧]·pandas如何保存numpy元素

    [开发技巧]·pandas如何保存numpy元素 ​ 1.问题描述 在开发的过程中遇到一个问题,就是需要把numpy作为pandas的一个元素进行保存,注意不是作为一列元素.但是实践的过程中却不顺利, ...

  5. 【VS开发】【电子电路技术】RJ45以太网传输线研究

    RJ45以太网传输线研究 最近研究远距离差分视频传输方案,理所当然想到了LVDS协议.至于选用cameralink传输线,还是选用其他方案,本人更倾向于廉价的RJ45以太网线来实现LVDS差分信号的传 ...

  6. Python pymysql对数据库的基础操作

    示例数据库名demo,表名info select * from info; 查看该表数据 +----+-------+--------+-----+---------------------+---- ...

  7. C语言Ⅰ作业12—学期总结

    一.我学到的内容 二.我的收获 作业链接 收获 C语言Ⅰ博客作业01 认识了PTA编程,博客园,Markdown基本语法1,Markdown基本语法2 C语言Ⅰ博客作业02 PTA系统常见问题解答 C ...

  8. Oracle常用启停命令

    一.监听启停 Oracle监听的启动.停止和状态查看 Oracle监听启动: lsnrctl start Oracle监听停止: lsnrctl stop Oracle监听状态 lsnrctl sta ...

  9. Java类初始化和实例初始化过程

    1.类初始化过程 一个类要创建实例需要先加载并初始化该类 main方法所在的类需要先加载和初始化 一个子类要初始化需要先初始化父类 一个类初始化就是执行<client>()方法(编译器生成 ...

  10. Comet OJ - Contest #13

    Rank53. 第一次打这种比赛.还是有不少问题的,以后改吧. A题WA了两次罚了不少时. C写到一半发现只能过1,就先弃了. D一眼没看出来.第二眼看出来就是一个类似于复数的快速幂. 然后B切了. ...