学习视频及笔记参考来源：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

一、移动端基础

1、视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。
布局视口 layout viewport：一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
视觉视口 visual viewport：用户正在看到的网站的区域。
理想视口 ideal viewport：添加meta视口标签，其主要目的是让布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽。

2、二倍图

在PC端页面，1px 等于1个物理像素，但是移动端不一定，因此存在图片在移动端模糊的问题。用多倍图来解决。
1px能显示的物理像素点的个数，称为物理像素比。
如果要显示 50px * 50px 的图像，我们首先先准备 100px * 100px 的高清图（以二倍图为例）。其次将图片缩小为 50px * 50px 。

img{/*原始图片100*100px*/width: 50px;height: 50px;
} .box{/*原始图片100*100px*/background-size: 50px 50px;
}

二、移动端技术解决方案

1、CSS初始化 normalize.css

作用：保护了有价值的默认值；修复了浏览器的bug；是模块化的；拥有详细的文档。
官网地址： http://necolas.github.io/normalize.css/

三、流式布局

1、基础知识

流式布局，就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。
max-width 最大宽度（max-height 最大高度）。
min-width 最小宽度（min-height 最小高度）。

2、案例：京东移动端首页

2.1 实现的界面

2.2 index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- 引入我们的css初始化文件 --><link rel="stylesheet" href="css/normalize.css"><!-- 引入我们首页的css --><link rel="stylesheet" href="css/index.css"><title>Document</title>
</head><body><!-- 顶部 --><header class="app"><ul><li><img src="data:images/close.png" alt=""></li><li><img src="data:images/logo.png" alt=""></li><li>打开京东APP，购物更轻松</li><li>立即打开</li></ul></header><!-- 搜索 --><div class="search_wrap"><div class="btn"><img src="data:images/s-btn.png" alt=""></div><div class="search"><div class="jd"></div><div class="sou"></div></div><div class="login">登录</div></div><!-- 主体部分 --><div class="maincontent"><!-- 滑动图 --><div class="slider"><img src="upload/banner.dpg" alt=""></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><nav><a href=""><img src="upload/nav3.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav2.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav3.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav2.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav3.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav2.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav3.webp" alt=""><span>京东超市</span></a></nav><!-- 新闻快报 --><div class="new"><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></div>
</body></html>

2.3 index.css

body {width: 100%;max-width: 640px;min-width: 320px;margin: 0 auto;font-size: 14px;font-family: -apple-system, Helvertica, sans-serif;color: #666;line-height: 1.5;/* background-color: #666; */
}* {margin: 0;padding: 0;list-style: none;
}img {vertical-align: middle;
}a {color: #666;text-decoration: none;
}.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;
}.clearfix {/* IE6、7 专有 */*zoom: 1;
}.app {height: 45px;
}.app ul li {float: left;height: 45px;background-color: #333333;line-height: 45px;text-align: center;color: #fff;
}.app ul li:nth-child(1) {width: 8%;text-align: center;line-height: 45px;
}.app ul li:nth-child(1) img {width: 10px;
}.app ul li:nth-child(2) {width: 10%;
}.app ul li:nth-child(2) img {width: 30px;/* 图片默认与基线对齐，要居中要写vertical-align: middle按中线对齐 */vertical-align: middle;
}.app ul li:nth-child(3) {width: 57%;
}.app ul li:nth-child(4) {width: 25%;background-color: #F63515;
}.search_wrap {/* 最上面的搜索栏往上滚动会固定在上方，因此选择用固定定位 */position: fixed;width: 100%;height: 44px;min-width: 320px;max-width: 640px;overflow: hidden;
}.search_wrap .btn {position: absolute;top: 0;left: 0;height: 44px;width: 40px;line-height: 44px;text-align: center;
}.search_wrap .btn img {width: 20px;vertical-align: middle;margin-left: 3px;
}.search_wrap .login {position: absolute;top: 0;right: 0;height: 44px;width: 40px;color: #fff;line-height: 44px;text-align: center;
}.search_wrap .search {position: relative;margin: 0 45px;margin-top: 7px;height: 30px;background-color: #fff;border: 1px solid gray;border-radius: 15px;
}.search_wrap .search .jd {position: absolute;width: 20px;height: 15px;top: 8px;left: 15px;background: url(../images/jd.png) no-repeat;background-size: 20px 15px;
}.search_wrap .search .jd::after {content: "";position: absolute;top: 0px;left: 26px;border-right: 1px solid #ccc;height: 15px;
}.search_wrap .search .sou {position: absolute;width: 18px;height: 15px;top: 8px;left: 50px;/* background-color: palegoldenrod; */background: url(../images/jd-sprites.png) no-repeat -81px 0;background-size: 200px auto;
}.maincontent .slider img {width: 100%;
}.maincontent .brand {overflow: hidden;border-radius: 15px 15px 0 0;
}.maincontent .brand div {float: left;width: 33.33%;
}.maincontent .brand div img {width: 100%;
}nav a {float: left;width: 20%;text-align: center;vertical-align: middle;
}nav a img {width: 40px;height: 40px;margin: 10px 0;
}nav a span {display: block;
}.new a img {float: left;box-sizing: border-box;
}.new a:nth-child(1) img {width: 50%;
}.new a:nth-child(n+2) img {width: 25%;border-left: 1px solid #ccc;
}

【HTML+CSS】移动端布局之流式布局相关推荐

CSS之布局系列--静态布局、流式布局、自适应布局、响应式布局的概念及区别
原文网址:CSS之布局系列--静态布局.流式布局.自适应布局.响应式布局的概念及区别静态布局.流式布局.自适应布局.响应式布局的概念及区别_IT利刃出鞘的博客-CSDN博客简介说明本文介绍前端的 ...
移动端常见布局方式(流式布局、flex弹性布局、less+rem+媒体查询、Bootstrap)
目录一:移动端页面 1.流式布局(百分比布局) 2.flex弹性布局(重点♥) flex布局初体验: flex布局原理: flex布局父项常见属性 flex-direction 设置主轴的方向 ♥ ...
静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC
静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...
静态布局、流式布局、自适应布局、弹性布局、响应式布局
静态布局.流式布局.自适应布局.弹性布局.响应式布局前端的布局主要有: 静态布局.流式布局.自适应布局.弹性布局.响应式布局等. 一.静态布局: 尺寸上一律使用px;同时限制外层容器的大小:中间的宽 ...
46、Flutter之布局组件流式布局Wrap，Flow
Row 和 Colum 如果子 widget 超出屏幕范围,则会报溢出错误,如: Row(children: <Widget>[Text("xxx"*100)], ); ...
（49）移动端开发之流式布局（百分比布局）
一.流式布局(百分比布局)介绍流式布局,就是百分比布局,也称非固定像素布局. 通过将盒子的宽度设置成百分比,从而根据屏幕的宽度来进行伸缩,不受固定像素的限制, 内容向两侧填充. 流式布局方式是移动w ...
【移动端网页布局】流式布局案例 ④ ( Banner 栏制作 | 固定定位 | 标准流 | 百分比宽度设置 )
文章目录一.Banner 栏样式及核心要点 1.实现效果 2.核心要点分析二.完整代码示例 1.HTML 标签结构 2.CSS 样式 3.展示效果一.Banner 栏样式及核心要点 1.实现效果 ...
两栏布局，三栏布局，等高布局，流式布局
读前笑一笑: 我前面一女生平胸,然后我问她哪天你晚上自己回家,被劫色怎么办-? 她淡淡的回了句:"我就脱了上衣,然后说,别激动,是自己人"--自己人--己人-人- 两栏布局: 1. ...
css-适配布局类型-流式布局-响应式布局
制作手机界面时,一般按照2倍的大小去做. 如果设备的宽度大于显示的宽度,可以做一个适配流体布局来个例子,体验代码 PC端可适配移动端电脑,与移动端都可正常显示假设,给每一个a标签加上了边框 ...
Android自定义组合布局,Android 流式布局 + 自定义组合控件
自定义组合控件 package yanjupeng.bawei.com.day09.two; import android.content.Context; import android.util.A ...

【HTML+CSS】移动端布局之流式布局

一、移动端基础

1、视口

2、二倍图

二、移动端技术解决方案

1、CSS初始化 normalize.css

三、流式布局

1、基础知识

2、案例：京东移动端首页

2.1 实现的界面

2.2 index.html

2.3 index.css

【HTML+CSS】移动端布局之流式布局相关推荐

最新文章

热门文章

【HTML+CSS】移动端布局之流式布局

一、移动端基础

1、视口

2、二倍图

二、移动端技术解决方案

1、CSS初始化 normalize.css

三、流式布局

1、 基础知识

2、案例：京东移动端首页

2.1 实现的界面

2.2 index.html

2.3 index.css

【HTML+CSS】移动端布局之流式布局相关推荐

最新文章

热门文章

1、基础知识