流式布局和viewport

流式布局

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

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相关推荐

移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
移动web基础：视口(viewport)，流式布局 JDM京东移动端开发
目标能够理解视口的概念并进行视口的设置能够说出流式布局的基本布局特征能够使用 2倍图进行页面开发能够实现京东首页的头部布局移动web基础移动端调试问题模拟器调试真机调试:使用手机进 ...
从上往下流式布局_教大家怎么写前端布局
一.静态布局(Static Layout) 1. 布局概念最传统.原始的Web布局设计.网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow: ...
02移动端布局基础之流式布局项目实战(京东移动端首页)
技术交流QQ群:1027579432,欢迎你的加入! 1.技术选型方案:采取单独制作移动页面方案技术:布局采取流式布局 2.搭建相关文件夹结构 3.设置视口标签以及引入初始化样式 ``` < ...
01移动端布局基础之流式布局
技术交流QQ群:1027579432,欢迎你的加入! 1.移动端基础浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器等. 移动端常见 ...
静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC
静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...
html流式布局插件,Jquery瀑布流网格布局插件
插件描述:一款简单且高度可定制的jQuery瀑布流网格布局插件.通过该瀑布流网格插件你可以动态添加和删除各种尺寸的图片,定义图片宽度,设置网格的列数,或使用流式布局方式,甚至还可以通过URL动态添加图 ...
（50）流式布局—京东移动端首页制作案例
一.访问地址多快好省,购物上京东! 二.技术选型方案:我们采取单独制作移动页面方案技术:布局采取流式布局三.搭建相关文件夹结构四.设置视口标签以及引入初始化样式 <meta name= ...
（49）移动端开发之流式布局（百分比布局）
一.流式布局(百分比布局)介绍流式布局,就是百分比布局,也称非固定像素布局. 通过将盒子的宽度设置成百分比,从而根据屏幕的宽度来进行伸缩,不受固定像素的限制, 内容向两侧填充. 流式布局方式是移动w ...
移动端开发——京东首页制作（流式布局）
移动端开发--京东首页制作(流式布局) 项目准备初始化基本文件夹创建index.html 设置视口引入基本公共样式引入自己的css样 <!DOCTYPE html> <htm ...