流式布局

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

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. Python学习笔记：MySQL数据库连接和使用

    一.安装pymysql插件 直接在pycharm中安装即可. 二.使用 1.数据库插入操作 insert 注意: insert语句需要提交,使用commit() 如果报错,需要回滚.使用rollbac ...

  2. 慕课网_Java入门第二季

    第1章 类和对象 1-1 什么是类和对象 (07:36) 1-2 如何定义 Java 中的类 (07:18) 1-3 如何使用 Java 中的对象 (04:45) 1-4 练习题 1-5 Java 中 ...

  3. harbor设置开机自启

    [root@bogon harbor]# vi /lib/systemd/system/harbor.service [Unit]Description=RedisAfter=network.targ ...

  4. MyBatis框架原理1：构建SqlSessionFactory的过程

    SqlSessionFactoryBuilder 首先创建了一个SqlSessionFactoryBuilder对象,然后调用该对象的build方法加载全局XML配置的流文件构建出一个SqlSessi ...

  5. CTF—攻防练习之FTP服务后门

    主机:192.168.32.152 靶机:192.168.32.156 首先查看靶机开放的端口: nmap 192.168.32.156 nmap  -T4 -A -v 192.168.32.156 ...

  6. C#学习笔记一（概念，对象与类型，继承）

    一.基础 1.CLR为公共语言运行库,类似于JVM 2..NET Framwork是一个独立发布的程序包,其包含了CLR,类库及相关的语言编辑器等工具,类似于JDK,除了C#,还有其他几种语言在CLR ...

  7. java之 Mybatis框架

    1.三层框架: 表现层: 是用于展示数据 业务层: 是处理业务需求 持久层: 是和数据库交互 注:MyBatis在持久层 2.JDBC操作数据库 public static void main(Str ...

  8. 深入理解java：3. NIO 编程

    I/O简介 I/O即输入输出,是计算机与外界世界的一个借口. IO操作的实际主题是操作系统. 在Java编程中,一般使用流的方式来处理IO,所有的IO都被视作是单个字节的移动,通过stream对象一次 ...

  9. Vim命令合集（四）

    Vim命令合集 命令历史 以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗口中输入以下命令即可 vim 直接启动vim vim filena ...

  10. [转帖]SSH命令总结

    SSH命令总结 ssh-keygen ssh-copy-id 等命令自己用过 但是知道的不系统 也知道 转发命令 但是也只是知道一点点... ttps://www.cnblogs.com/chenfa ...