05-移动web之流式布局
一、视口
1.常见屏幕知识
| 设备 | 解释 | 描述 |
|---|---|---|
| 宽 | 屏幕的宽度 - （单位：英寸） | 屏幕的宽度 |
| 高 | 屏幕的高度 -（单位：英寸） | 屏幕的高度 |
| 对角线 | 屏幕的对角线的长度 英寸 | 一般说手机尺寸 是指以屏幕对角线为衡量 单位是 英寸 |
| 逻辑分辨率 | 屏幕的宽度 * 屏幕的高度 （单位：px） | 描述屏幕的宽度和高度 |
| 设备分辨率 | 物理像素点 | 屏幕里面一共拥有的物理像素点的个数 |
| PPI | 像素密度 | 每英寸所拥有的物理像素点 |
| 设备像素比 | 设备分辨率和逻辑分辨率的比例（取宽度比较） | 可以简单理解为屏幕的清晰度的倍数 |
设备分辨率就是手机中的发光点，数值越大，越清晰。
2.二倍图
一倍图：当设备像素比为1:1时，使用1个设备像素显示1个CSS像素。
二倍图：当设备像素比为2:1时，使用4个设备像素显示1个CSS像素。
一张相同的图片放在设备像素比为1的手机上和设备像素比为2的手机上时，像素比为2的手机会出现失真现象。
在设备像素比为2的手机上，原来的一个物理像素点能显示的图像却变成了 由4个物理像素点来显示，那么就会造成 就近取色的效果，出现失真现象。
在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题，就是统一将图片放大到2倍，使用时缩小2倍使用。
3.视口
视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口。
视口就是一个包裹着html的容器，由乔布斯发明，默认宽度980px。
3.1 布局视口
在布局视口下，html标签的宽度变成了 980px 而不是 和 屏幕等宽。
是所有手机端自带的默认视口，默认视口分辨率为 980px，把一个980px宽的页面放入到320px的小屏幕上，所以网页元素元素都非常小。
3.2 标准理想视口（开发用）
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
| 属性名 | 取值 | 描述 |
|---|---|---|
| width | 正整数或device-width | 定义视口的宽度，单位为像素 |
| height | 正整数或device-height | 定义视口的高度，单位为像素，一般不用 |
| initial-scale | [0.0-10.0] | 定义初始缩放值 |
| minimum-scale | [0.0-10.0] | 定义缩小最小比例，它必须小于或等于maximum-scale设置 |
| maximum-scale | [0.0-10.0] | 定义放大最大比例，它必须大于或等于minimum-scale设置 |
| user-scalable | yes/no | 定义是否允许用户手动缩放页面，默认值yes |
视口参数设置：
- meta标签用来描述或设置一个HTML网页文档的属性
- content 要设置或者描述的内容
- content 要设置或者描述的内容
- width 设置视口的宽度 device-width等于屏幕的宽度
- initial-scale 页面打开的时候视口放大的倍数 值:1
- user-scalable 是否允许用户缩放页面 值：no
- maximum-scale 如果允许放大的话 最大放大多少倍 值 ：1
- minimum-scale 如果允许放大的话 最小放大多少倍 值 ：1
二、流式布局（百分比布局）
为了让页面中的元素能跟随屏幕的大小变换而变化，会使用百分比的形式来设置宽度或者高度
1.几个经典布局
1.左侧固定，右侧自适应（padding）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 50px;
background-color: #f34;
}
.left {
/* 1.左侧盒子固定，写死宽高 */
width: 70px;
height: 50px;
/* 2.左浮动 */
float: left;
background-color: #095;
}
.right {
/* 3.不写宽度，给右侧盒子加paddign-left，将内容挤过去 */
padding-left: 70px;
}
.right .info {
/* 4.在里面套一个盒子，使padding生效 */
height: 50px;
background-color: #06c;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right">
<div class="info"></div>
</div>
</div>
</body>
</html>
2.左侧固定，右侧自适应（margin）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 50px;
background-color: #f34;
}
.left {
/* 1.左侧盒子固定，写死宽高 */
width: 70px;
height: 50px;
/* 2.左浮动 */
float: left;
background-color: #095;
}
.right {
height: 50px;
/* 3.右侧标准流，直接用margin挤过去 */
margin-left: 70px;
background-color: #06c;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
3.左侧固定，右侧自适应（overflow）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 50px;
background-color: #f34;
}
.left {
/* 1.左侧盒子固定，写死宽高 */
width: 70px;
height: 50px;
/* 2.左浮动 */
float: left;
background-color: #095;
}
.right {
height: 50px;
/* 3.右侧标准流，由于浮动的元素压不住overflow:hidden*/
overflow: hidden;
background-color: #06c;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
4.右侧固定，左侧自适应（overflow）
其他两个写法与左侧固定，右侧自适应同理，只需在body中将右侧写在前面即可
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 50px;
background-color: #f34;
}
.right {
/* 1.右侧盒子固定，写死宽高 */
width: 70px;
height: 50px;
/* 2.右浮动 */
float: right;
background-color: #095;
}
.left {
height: 50px;
/* 3.左侧标准流，由于浮动的元素压不住overflow:hidden*/
overflow: hidden;
/* 用margin也可以实现 */
/* margin-right: 70px; */
background-color: #06c;
}
</style>
</head>
<body>
<div class="box">
<!-- 由于代码从上往下执行，所以要将固定区域写在前面， -->
<!-- 如果自适应的区域写在前面，由于没写宽，会将一行沾满，浮动的固定区域只会另起一行 -->
<div class="right"></div>
<div class="left"></div>
</div>
</body>
</html>
5.左右固定，中间自适应
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 50px;
background-color: #f34;
}
.left {
height: 50px;
float: left;
width: 70px;
background-color: #09f;
}
.right {
height: 50px;
float: right;
width: 50px;
background-color: #90f;
}
/* 左右宽高写死，左浮右浮动 */
.center {
height: 50px;
/* 1.用margin挤开左右距离 */
/* margin: 0 50px 0 70px; */
/* 2.用overflow */
overflow: hidden;
background-color: #06c;
}
</style>
</head>
<body>
<div class="box">
<!-- 同理，这里自适应的区域要写在后面 -->
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
</html>
6.左右固定，中间自适应（圣杯布局）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
text-align: center;
line-height: 50px;
}
header,
footer {
height: 50px;
background-color: #ccc;
}
footer {
clear: both;
}
.box {
/* 1.用预留出左右盒子的位置 */
padding: 0 50px 0 80px;
}
.box .center,
.box .left,
.box .right {
/* 2.三个盒子都左浮 */
float: left;
height: 50px;
}
.box .center {
/* 3.自适应区域宽度100% */
width: 100%;
background-color: #90f;
}
.box .left {
width: 80px;
background-color: #09f;
/* 4.往回走一个父盒子宽度，就是往上移一行 */
margin-left: -100%;
position: relative;
/* 5.利用相对定位，往回走自身的宽度 */
left: -80px;
}
.box .right {
width: 50px;
background-color: #f34;
/* 6.向上移动自身的宽度 */
margin-left: -50px;
/* 7.向右移动自身的宽度 */
position: relative;
right: -50px;
}
</style>
</head>
<body>
<header>header</header>
<div class="box">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<footer>footer</footer>
</body>
</html>
7.左右固定，中间自适应（双飞翼布局）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
text-align: center;
line-height: 50px;
}
header,
footer {
height: 50px;
background-color: #ccc;
}
footer {
clear: both;
}
.content {
/* 1.预留出左右位置 */
margin: 0 50px;
}
.box .center,
.box .left,
.box .right {
/* 2.三个盒子都左浮 */
float: left;
height: 50px;
}
.box .center {
/* 3.自适应盒子宽100% */
width: 100%;
background-color: #095;
}
.box .left {
width: 50px;
background-color: #09f;
/* 4.左边盒子上移一行 */
margin-left: -100%;
}
.box .right {
width: 50px;
background-color: #90f;
/* 5.右边盒子也上去 */
margin-left: -50px;
}
</style>
</head>
<body>
<header>header</header>
<div class="box">
<div class="center">
<div class="content">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<footer>footer</footer>
</body>
</html>
2.京东案例
https://www.lanzous.com/ib5pw7a
05-移动web之流式布局的更多相关文章
- 2021年3月-第02阶段-前端基础-Flex 伸缩布局-移动WEB开发_流式布局
移动web开发流式布局 1.0 移动端基础 1.1 浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器. 移动端常见浏览器:UC浏览器, ...
- 移动web中的流式布局和viewport知识介绍
1 流式布局 其实 流式布局 就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充. 这样的布局方式 就是移动web开发使用的常用布局方式 ...
- Web前端_流式布局（百分比布局）
移动Web_流式布局(百分比布局) writer:late at night codepeasant 1(百分比布局) ☞核心知识点 1.流式布局(百分比布局) 2.视口设置 ☞今日目标 1. 能够使 ...
- 流式布局&固定宽度&响应式&rem
我们现在在切页面布局的使用常用的单位是px,这是一个绝对单位,web app的屏幕适配有很多中做法,例如:流式布局.限死宽度,还有就是通过响应式来做,但是这些方案都不是最佳的解决方法. 1.流式布局: ...
- webapp，liveapp： 流式布局和rem布局
liveapp场景应用,一般针对的是移动端,近来也是很火,颇有一些感受,拿来分享一下. 页面宽度范围: 一般移动端页面我们的像素范围是320px-640px,最大640px,最小320px,所以设计稿 ...
- JAVA 流式布局管理器
//流式布局管理器 import java.awt.*; import javax.swing.*; public class Jiemian2 extends JFrame{ //定义组件 JBut ...
- 自定义View(三)--实现一个简单地流式布局
Android中的流式布局也就是常说的瀑布流很是常见,不仅在很多项目中都能见到,而且面试中也有很多面试官问道,那么什么是流式布局呢?简单来说就是如果当前行的剩余宽度不足以摆放下一个控件的时候,则自动将 ...
- Android 自动换行流式布局的RadioGroup
效果图 用法 使用FlowRadioGroup代替RadioGroup 代码 import android.content.Context; import android.util.Attribute ...
- Android 自定义View修炼-Android中常见的热门标签的流式布局的实现
一.概述:在日常的app使用中,我们会在android 的app中看见 热门标签等自动换行的流式布局,今天,我们就来看看如何 自定义一个类似热门标签那样的流式布局吧(源码下载在下面最后给出哈) 类似的 ...
随机推荐
- Angularjs优点
数据双向绑定,前后台的更改都可以随时生效, 提供mvc开发模式模式,剥离前端各部分代码,使代码便于维护管理. 简化了你写DOM操作
- 解决WSL在执行32位程序时报错“Exec format error”的问题
当你尝试在WSL上运行32位的程序时,shell将会报错:cannot execute binary file: Exec format error. 这是因为WSL目前暂不支持32位的ELF可执行文 ...
- Contest 160
2019-10-29 16:36:24 总体感受:有一段时间没有打比赛,手居然有生疏的感觉,这次肯定是要掉分了,然后在做combination问题的时候没有敲对代码,很伤. 注意点:依然需要多练习,很 ...
- Springboot CORS跨域访问
Springboot CORS跨域访问 什么是跨域 浏览器的同源策略限制: 它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础 ...
- layer弹层插件
// 使用前需要引入jquery的支持,链接如下: https://blog-static.cnblogs.com/files/liguanlong/jquery1.9.1.min.js ...
- PHP Curl进行Post时指定 multipart/form-data 或 application/x-www-form-urlencoded 的方法
PHP Curl进行Post时指定 multipart/form-data 或 application/x-www-form-urlencoded 的方法 先看一段典型的CURL POST的代码: $ ...
- 使用PyTorch建立图像分类模型
概述 在PyTorch中构建自己的卷积神经网络(CNN)的实践教程 我们将研究一个图像分类问题--CNN的一个经典和广泛使用的应用 我们将以实用的格式介绍深度学习概念 介绍 我被神经网络的力量和能力所 ...
- Node教程——Node+MongoDB案例实现用户信息的增删改查
想要获取源代码的同学可以留言,我不做git上传了,案例太简单 没必要 综合演练 用户信息的增删改查 需求:你需要实现这样的结果 点击添加可以添加用户,点击删除可以删除点击修改可以修改 代码分析: 1. ...
- springboot+ehcache 基于注解实现简单缓存demo
1.加入maven依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactI ...
- 启用SELinux保护
启用SELinux保护 案例1:启用SELinux保护 1.1问题 本例要求为虚拟 ...