流式布局

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

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. idea 编译 netty 源码

    git clone netty 源码,运行 example 报错 全量 mvn compile -DskipTests=true 后,依然报错 手动在 netty-buffer 模块中添加对应的依赖 ...

  2. Linux_系统破坏性修复实验

    目录 目录 修改系统用户密码 grub修复 系统修复 最后 修改系统用户密码 随便介绍一个修改Linux系统用户密码的方法. 步骤: 开机读秒时按任意键 进入grub列表项配置按e 选择系统kerne ...

  3. 阶段3 2.Spring_04.Spring的常用注解_5 自动按照类型注入

    运行出现了空指针异常 @Autowired 注解出现的位置 AutoWired的代码 常用的就是写类上和方法上. 运行测试,刚才运行是一个空指针异常 也就是通过Autowired 这个accountD ...

  4. ALV SCRIPTFROM 内容比较全的一个例子

    REPORT  ZQM_PRT04. *----------------------------------------------------------------------* * TABLES ...

  5. Sqlserver实现故障转移 — 域控（1）

    一  .实现目的:实现两台sqlserver数据库服务器的实时备份及故障转移:即:其中一台数据库服务器宕机后,应用程序可自动连接到另一台数据库服务器继续运行. 二.域控:域控制器是指在“域”模式下,至 ...

  6. mysql——多表——内连接查询

    内连接查询:可以查询两个或者两个以上的表,当两个表中存在表示相同意义的字段时,可以通过该字段来连接这两个表: 当该字段的值相等时,就查询出该记录. 前期准备两个表: ), d_id ), name ) ...

  7. windows如何使用bat快速安装计划任务？

    关键词:windows定时任务,schtasks,at ,bat schtasks 部分转自: https://www.cnblogs.com/yumianhu/p/3710743.html at的详 ...

  8. [转帖]虚拟内存探究 -- 第二篇:Python 字节

    虚拟内存探究 -- 第二篇:Python 字节 http://blog.coderhuo.tech/2017/10/15/Virtual_Memory_python_bytes/ 是真看不懂哦     ...

  9. 干货 | 深入分析 string.intern() 方法

    首先我们来看一段代码: public class InternTest {      public static void main(String[] args) {     String str1 ...

  10. 02、CDF文件

    有了探针排布图像的基础,我们就可以更好地理解CDF文件了.假如每个探针的位置用一个坐标表示,以左上角为(0,0),那么整张芯片的坐标就如下图(行数n必须等于列数m,这里共有n*m个探针): 0,0 1 ...