流式布局就是利用百分比来进行适配不同的设备,采用等比例缩放布局方式。盒子占比,宽度占父盒子多大,可以用百分比来表示
视口:
浏览器显示页面内容的屏幕区域,分为布局视口、视觉视口、理想视口(手机多宽、布局的视口有多宽,需要手动加meta视口标签)
meta视口标签:
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
物理像素比
物理像素:分辨率。
像素比,不固定,就是一像素可以放几个像素点
二倍图
解决图片清晰问题,可以把图片尺寸缩小,显示会更清晰。
二倍精灵图测量和做法:
- 先在工具里面把整个精灵图缩小为原来的一半(不要保存,理论上缩小)
- 在测量现在所需图片的大小和位置
- 在代码中把精灵图的大小缩小为原来的一半。注意写法:百分比代表盒子大小的占比
结构
<!-- 搜索 -->
<div class="search-wrap">
<div class="search-btn"></div>
<div class="search">
<div class="jd-icon"></div>
<div class="sou"></div> <!-- 增加 -->
</div>
<div class="search-login">登陆</div>
</div>
样式:
.sou {
position: absolute;
top: 8px;
left: 50px;
<!-- 现在的大小 -->
width: 18px;
height: 15px;
background: url(../images/jd-sprites.png) no-repeat -81px 0;
<!--注意anto写法,如下,百分比注意-->
background-size: 200px auto;
}
div {
width: 500px;
height: 500px;
border: 2px solid red;
background: url(images/dog.jpg) no-repeat;
/* 如果写固定的值 写多少就是多少 */
background-size: 200px 200px;
/* 如果参数是 % 大小参考的是盒子 */
background-size: 50% 50%;
/* background-size: contain; */
/* background-size: cover; */
}
移动端技术解决方案
移动端 CSS 初始化推荐使用 normalize.css/
官网http://necolas.github.io/normalize.css/
移动端大量使用CSS3盒子模型box-sizing.CSS3盒子模型: 盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding .padding 和 border 不会撑大盒子了。
PC端完全需要兼容就用传统盒子模型,不考虑兼容性就用CSS3盒子模型
特殊样式
常见选型
流式布局
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式。
<style>
* {
margin: 0;
padding: 0;
}
section {
width: 100%;
max-width: 980px;
min-width: 320px;
margin: 0 auto;
}
section div {
float: left;
width: 50%;
height: 400px;
}
section div:nth-child(1) {
background-color: pink;
}
section div:nth-child(2) {
background-color: purple;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
</section>
</body>
京东项目:
页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 与pc端视口标签略有不同 记得修改-->
<meta name="viewport"
content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
/*引入初始化样式*/
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/index.css">
<title>Document</title>
</head>
<body>
<header class="app">
<ul>
<li>
<img src="./images/close.png" alt="">
</li>
<li><img src="./images/logo.png" alt=""></li>
<li>打开京东APP,购物更轻松</li>
<li>立即打开</li>
</ul>
</header>
<div class="search-wrap">
<div class="search-btn"></div>
<div class="search">
<div class="scale"></div>爆款满199-20
</div>
<div class="search-login">登录</div>
</div>
<div class="main-content">
<div class="slider">
<img src="./upload/banner.dpg" alt="">
</div>
</div>
<div class="brand">
<div>
<img src="./upload/pic11.dpg" alt="">
</div>
<div><img src="./upload/pic22.dpg" alt=""></div>
<div><img src="./upload/pic33.dpg" alt=""></div>
</div>
<div class="nav">
<a href="#"><img src="./upload/nav1.webp" alt=""><span>京东超市</span></a>
<a href="#"><img src="./upload/nav1.webp" alt=""><span>京东超市</span></a>
<a href="#"><img src="./upload/nav1.webp" alt=""><span>京东超市</span></a>
<a href="#"><img src="./upload/nav1.webp" alt=""><span>京东超市</span></a>
<a href="#"><img src="./upload/nav1.webp" alt=""><span>京东超市</span></a>
<a href="#"><img src="./upload/nav1.webp" alt=""><span>京东超市</span></a>
<a href="#"><img src="./upload/nav1.webp" alt=""><span>京东超市</span></a>
<a href="#"><img src="./upload/nav1.webp" alt=""><span>京东超市</span></a>
<a href="#"><img src="./upload/nav1.webp" alt=""><span>京东超市</span></a>
<a href="#"><img src="./upload/nav1.webp" alt=""><span>京东超市</span></a>
</div>
<div class="news">
<a href="#"><img src="./upload/new1.dpg" alt=""></a>
<a href="#"><img src="./upload/new2.dpg" alt=""></a>
<a href="#"><img src="./upload/new3.dpg" alt=""></a>
</div>
</body>
</html>
布局:
/*常用初始化样式*/
body {
width: 100%;
min-width: 320px;
max-width: 640px;
margin: 0 auto;
font-family: -apple-system, Helvetica, sans-serif;
font-size: 14px;
color: #666;
line-height: 1.5;
height: 2000px;
/* background-color: #666; */
}
/* 点击高亮清除,设置为transparent */
* {
-webkit-tap-highlight-color: transparent;
}
/* 移动端浏览器默认的外观ios上加上这个属性才能给按钮输入框和自定义样式 */
input {
-webkit-appearance: none;
}
/* 禁用长按页面时的弹出菜单 */
img,
a {
-webkit-touch-callout: none;
}
a {
text-decoration: none;
}
ul {
/* 注意清除ul与li边距 */
list-style: none;
padding: 0;
margin: 0;
}
img {
/* 去除图片底侧空隙 */
vertical-align: top;
}
.app {
height: 45px;
}
.app li {
float: left;
height: 45px;
background-color: #333;
line-height: 45px;
text-align: center;
color: #fff;
}
.app li:nth-child(1) {
width: 8%;
}
.app li:nth-child(1) img {
width: 10px;
height: 10px;
vertical-align: middle;
}
.app li:nth-child(2) {
width: 10%;
}
.app li:nth-child(2) img {
width: 30px;
/* 出现行内块的时候,往往会加vertical 因为默认图片与文字是基线对齐的,看起来并不美观 */
vertical-align: middle;
}
.app li:nth-child(3) {
width: 57%;
}
.app li:nth-child(4) {
width: 25%;
background-color: red;
}
.search-wrap {
height: 44px;
/* position: relative; */
/* 外边距合并 search的margin的出现导致了这个问题,解决方法,添加父级添加overflow:hidden */
overflow: hidden;
border-bottom: 1px solid #000;
position: fixed;
min-width: 320px;
max-width: 640px;
width: 100%;
/* background-color: red; */
}
.search-btn {
position: absolute;
left: 0;
top: 0;
/* background-color: pink; */
height: 40px;
width: 40px;
}
.search-btn::before {
content: '';
display: block;
width: 20px;
height: 20px;
background: url(../images/s-btn.png) no-repeat;
background-size: 20px auto;
margin-top: 14px;
margin-left: 15px;
}
.search {
position: relative;
height: 30px;
margin: 7px 45px 0;
/* background-color: #666; */
border-radius: 15px;
padding-left: 85px;
color: #ccc;
line-height: 30px;
font-size: 14px;
}
.search::before {
position: absolute;
left: 15px;
top: 7px;
content: '';
display: block;
width: 30px;
height: 20px;
background: url(../images/jd.png) no-repeat;
background-size: 25px auto;
border-right: 1px solid #000;
}
.scale {
position: absolute;
top: 9px;
left: 55px;
width: 21px;
height: 18px;
background: url(../images/jd-sprites.png) no-repeat;
background-position: -81px 0;
background-size: 200px auto;
}
.search-login {
position: absolute;
right: 0;
top: 0;
/* background-color: pink; */
width: 40px;
height: 40px;
color: #fff;
line-height: 44px;
}
.slider img {
width: 100%;
}
.brand {
border-radius: 8px;
overflow: hidden;
}
.brand div {
float: left;
width: 33.33%;
}
.brand div img {
width: 100%;
}
.nav a {
float: left;
width: 20%;
text-align: center;
color: #aaa;
}
.nav a span {
display: block;
}
.nav a img {
width: 40px;
margin: 10px 20px;
}
.news a {
float: left;
box-sizing: border-box;
}
.news a:nth-child(1) {
width: 50%;
}
.news a:nth-child(2) {
width: 25%;
border-left: 1px solid #ccc;
}
.news a:nth-child(3) {
width: 25%;
border-left: 1px solid #ccc;
}
.news img {
width: 100%;
}