移动web流式布局
☞移动端基础概念介绍【了解】
1.知识点-移动设备-屏幕尺寸
- 屏幕尺寸: 代表的是移动设备屏幕对角线的长度 ,单位是 寸
2.知识点-移动设备-物理分辨率
- 物理分辨率: 代表的就是当前设备的宽度和高度 单位是 px (不能修改的)[记住一些常用的分辨率]
- 屏幕分辨率: 代表的移动设备屏幕的分辨率(衡量设备的画质的高低) [了解]
- 记住一些常见的移动设备分辨率:
- iphone4 : 320px 480px
- iphone5 : 320px 568px
- iphoneX, 6,7,8
3.知识点-移动设备1
-
像素密度(ppi): 单位面积(每英寸)所能容纳像素点的个数
-
ip3: 每英寸面积中只能最多包含163个像素点
-
ip4: 每英寸面积中只能最多包含326个像素点
-
为什么要学像素密度呢?
- 设备中的分辨率大小不是固定的,与像素密度有关系的
-
总结一下像素密度作用:
- 像素密度越高: 单位面积中容纳像素点的个数越多,画质越细腻
- 像素密度越低: 单位面积汇总容纳像素点的个数越少,画质越粗糙
-
多聊一句: 安卓设备现在最要是用dpi表示像素密度的,苹果设备用ppi表示像素密度
-
屏幕尺寸 和 分辨率 和 像素密度之间的关系
4.知识点-移动设备-设备独立像素比（dpr）
- 设备独立像素(dpr): 代表的是一个固定的且不能人为修改的比例值
- 为什么设备中会出现设备独立像素dpr?
- 从物理角度解决图片大小问题
- 总结设备独立像素: 设备独立像素是设备本身就有的一个比例值,我们不能修改设置
☞移动端2倍图
1. 什么是2倍图: 图片放大到原来图片的2倍大小(背景图 + img)
2. 为什么要讲2倍图?
- 为了保证图片在不同设备中都能够清晰的显示,所以在实际开发中,常会做一张2倍图(在移动端中出现,PC端不用考虑)
- 2倍图的依据就是设备独立像素 比dpr
☞视口（viewport）
-
什么是视口?
视口就是我们通过设备预览网页的一个窗口 1. PC端视口指的就是浏览器可视区域的窗口大小 2. 移动端视口指的是移动设备屏幕区域的大小(不再是移动设备中浏览器窗口大小) [视口特指移动设备] -
视口都有哪些?
- 视觉视口(visual viewport): 在PC端,视觉视口就是浏览器的窗口,在移动端视觉视口就是屏幕
- 布局视口(layout viewport): 布局视口是和网页布局有关的.默认移动端的布局视口是980px
- 理想(标准)视口(ideal viewport): 保证页面中的盒子水平方向不能出现滚动条,页面中的内容不能出现缩放效果
<meta name="viewport" content="width=device-width,initial-scale= 1">
viewport: 代表视口
width=device-width: 设置布局盒子宽度与当前设备宽度大小一样(避免出现水平滚动条)
initial-scale: 1 保证页面中的元素(盒子 和 文字) 不能出现缩放效果
5.知识点-流式布局(百分比布局)
-
流式布局特点-给元素设置宽度或者高度的时候以百分比结束
为什么在移动端要推荐设置百分比布局?而不推荐px了? 为了保证当前盒子在不同设备中都能正常预览 -
百分比方式：协助解决页面中的元素适配 meta 标签设置就可以
6.核心知识点总结:
- 流式布局(百分比布局): 设置元素的宽度或者高度为百分比
- 视口设置: 理想视口的设置 通过
- 布局视口默认大小是: 980px[了解]
☞JD移动端页面案例
1.JD案例-两端固定大小-中间自适应布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 100%;
height: 200px;
padding: 0 200px;
background-color: green;
box-sizing: border-box;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
background-color: red;
}
.middle {
width: 100%;
height: 200px;
background-color: pink;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<!-- 双飞翼布局(圣杯布局): 两端固定大小,中间自适应布局 -->
<div class="box">
<div class="left"></div>
<div class="middle">升温渣士大夫</div>
<div class="right"></div>
</div>
</body>
</html>
2.JD案例-多行文字超出显示省略号
- 注意: 如果是纯字母实现多行文本溢出,需要加一个属性 word-break: break-all;
- 默认字母不会自动换行的,所以需要加 word-break: break-all 并且在文字中设置一个空格或者回车符
overflow: hidden;
/* 文字溢出显示省略号：单行文字 */
text-overflow: ellipsis;
/* 辅助属性：兼容性 */
-webkit-line-clamp: 2;
/* 文字就要垂直显示 */
-webkit-box-orient: vertical;
/* 还需要设置一个弹性盒子 */
display: -webkit-box;
3.JD案例-定位脱标元素盒子居中
1. margin: 0 auto; 只能实现标准流下的盒子居中显示
2. position: absolute;
left: 50%;
margin-left: -25px;
3. position: absolute;
left: 50%;
top: 50%;
/* 也是向左移动当前元素宽度的一半 */
transform: translate(-50%, -50%);
京东案例效果图：
本人自己做的代码片段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./CSS/base.css">
<link rel="stylesheet" href="./CSS/demo.css">
</head>
<body>
<!-- logo搜索栏 -->
<div class="box-hd">
<div class="hd-left">
<span class="logo"></span>
</div>
<div class="hd-middle">
<input type="text" placeholder="100万件商品疯狂抢购">
<span class="sousuo">
</span>
</div>
<div class="hd-right">
<a href="#">搜索</a>
</div>
</div>
<!-- 焦点图 -->
<div class="focus">
<ul>
<li><a href="#">
<img src="./uploads/slide_1.jpg" alt="">
</a></li>
</ul>
</div>
<!-- 导航栏nav -->
<div class="nav">
<ul>
<li>
<a href="#">
<img src="./img/nav_1.png" alt="">
<p>京东超市</p>
</a>
</li>
<li>
<a href="#">
<img src="./img/nav_2.png" alt="">
<p>全球购</p>
</a>
</li>
<li>
<a href="#">
<img src="./img/nav_3.png" alt="">
<p>充值中心</p>
</a>
</li>
<li>
<a href="#">
<img src="./img/nav_4.png" alt="">
<p>服装城</p>
</a>
</li>
<li>
<a href="#">
<img src="./img/nav_5.png" alt="">
<p>理财</p>
</a>
</li>
<li>
<a href="#">
<img src="./img/nav_6.png" alt="">
<p>领劵</p>
</a>
</li>
<li>
<a href="#">
<img src="./img/nav_7.png" alt="">
<p>物流查询</p>
</a>
</li>
<li>
<a href="#">
<img src="./img/nav_8.png" alt="">
<p>我的关注</p>
</a>
</li>
</ul>
</div>
<!-- 秒杀 -->
<div class="sk">
<div class="sk-t">
<span class="clock left">
</span>
<span class="left word">掌声秒杀</span>
<ul>
<li class="left">12</li>
<li class="left">:</li>
<li class="left">12</li>
<li class="left">:</li>
<li class="left">12</li>
</ul>
<a href="#" class="right word1">更多秒杀 ></a>
</div>
<div class="sk-bd">
<ul>
<li class="left">
<a href="#">
<img src="./uploads/seckill_1.jpg" alt="">
<strong>¥79</strong>
<del>138</del>
</a>
</li>
<li class="left">
<a href="#">
<img src="./uploads/seckill_2.jpg" alt="">
<strong>¥79</strong>
<del>138</del>
</a>
</li>
<li class="left">
<a href="#">
<img src="./uploads/seckill_3.jpg" alt="">
<strong>¥79</strong>
<del>138</del>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
css代码：
base.css
body, p, h1, h2, h3, h4, h5, h6, ul , ol, dl {
margin: 0;
padding: 0;
list-style: none;
font-family: '微软雅黑';
font-size: 14px;
color: #666;
}
a {
text-decoration: none;
color: #666;
}
input, img {
vertical-align: middle;
padding: 0;
margin: 0;
border: 0 none;
outline-style: none;
}
.left {
float: left;
}
.right {
float: right;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
demo.css
/* logo搜索栏 */
.box-hd {
position: fixed;
top: 0;
left: 0;
height: 40px;
width: 100%;
background-color: #c91523;
padding: 0 40px 0 60px;
box-sizing: border-box;
}
.hd-left {
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 60px;
}
.hd-left .logo {
display: block;
width: 56px;
height: 40px;
text-align: center;
margin-top: 10px;
background: url(../img/jd-sprites.png) no-repeat 0 -110px;
background-size: 200px 200px;
}
.hd-middle {
position: relative;
height: 40px;
width: 100%;
}
.hd-middle input {
height: 25px;
width: 100%;
border-radius: 10px;
margin-top: 7px;
padding-left: 30px;
box-sizing: border-box;
}
.hd-middle .sousuo {
position: absolute;
top: 10px;
left: 4px;
display: block;
width: 25px;
height: 20px;
background: url(../img/jd-sprites.png) no-repeat -55px -110px;
background-size: 200px 200px;
}
.hd-right {
position: absolute;
top: 0;
right: 0;
height: 40px;
width: 40px;
text-align: center;
}
.hd-right a {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 12px;
color: #ffffff;
}
/* 焦点图 */
.focus li a img {
width: 100%;
margin-top: 40px;
}
/* 导航栏nav */
.nav {
overflow: hidden;
}
.nav ul li {
width: 25%;
float: left;
margin-top: 10px;
}
.nav ul li a {
display: block;
width: 100%;
text-align: center;
}
.nav ul li a img {
width: 45px;
}
.nav ul li a p {
font-size: 12px;
}
/* 秒杀 */
.left {
float: left;
}
.right {
float: right;
}
.sk {
width: 100%;
margin-top: 10px;
}
.sk .sk-t {
overflow: hidden;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
.sk .sk-t .clock {
display: block;
width: 20px;
height: 20px;
background: url(../img/jd-sprites.png) no-repeat -82px -110px;
background-size: 200px 200px;
}
.word {
margin: 0 5px;
}
.sk .sk-t ul li:nth-child(odd) {
background-color: #000;
border-radius: 10px;
font-size: 12px;
color: #fff;
margin-top: 3px;
}
.sk .sk-t .word1 {
font-size: 12px;
}
/* 秒杀商品 */
.sk .sk-bd {
width: 100%;
overflow: hidden;
}
.sk .sk-bd li {
width: 33%;
text-align: center;
}
.sk .sk-bd li a img {
width: 100%;
}
.sk .sk-bd li strong {
display: block;
color: red;
}
猛击下载京东案例压缩包
如有不足，请多指教，
未完待续，持续更新！
大家一起进步！
5332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
