目录

1. 移动端基础

1.1 浏览器现状

1.2 手机屏幕现状

1.3 移动端调试方法

2. 视口

2.1 布局视图（layout viewport）

2.2 视觉视口（visual viewport）

2.3 理想视图（ideal viewport）

2.4 meta视口标签

2.5 标准的viewport设置

3. 二倍图

3.1 物理像素&物理像素比

3.2 多倍图

3.3 背景缩放background-size

3.4 多倍图切图cutterman

4. 移动端开发选择

4.1 单独制作移动端页面（主流）（重点）

4.2 响应式页面兼容移动端（其次）

5. 移动端技术解决方案

5.1 移动端浏览器

5.2 css初始化 normalize.css

5.3 css盒子模型 box-sizing

5.3 特殊样式

6. 移动端常见布局

7. 移动端开发之流式布局

8. 京东移动首页制作

8.1 技术选型

8.2 搭建文件夹的结构

8.3 设置标签和引入样式

8.4 初始化样式

8.5 补充：二倍精灵图的做法

8.6 代码

1. 移动端基础

1.1 浏览器现状

pc端浏览器：360、谷歌、火狐、百度、ie

移动端浏览器：uc、qq、百度、谷歌、搜狗

移动端浏览器主要是对webkit内核进行兼容开发的

总结：兼容移动端主流浏览器，处理webkit内核浏览器即可

1.2 手机屏幕现状

尺寸多，碎片化；Android、iPhone设备分辨率多；我们常用的单位是px

1.3 移动端调试方法

  • Chrome devtools（谷歌）的模拟手机调试
  • 搭建本地web服务器，手机和服务器一个局域网，通过手机访问浏览器

2. 视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口分为布局视口、视觉视口和理想视口

2.1 布局视图（layout viewport）

移动浏览器都默认设置一个布局视图

ios，Android基本将这个视口分辨率设置为980px，

2.2 视觉视口（visual viewport）

就是用用户看到网站的区域，注意是网站的区域

我们可以用缩放去操作视图，但不会影响布局视口，布局视口乃保持原来的宽度

2.3 理想视图（ideal viewport）

移动端最理想的和浏览和阅读宽度而设定

需要手动填写meta视口标签通知浏览器操作

meta视口标签的主要目的：布局视口的宽度应该和理想视口宽度一致

2.4 meta视口标签

<meta name="viewport" content="width=device-width,user-scalable=no initial-scale=1.0 maximum-scale=1.0, minimum-scale=1.0">

2.5 标准的viewport设置

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0， user-scalable=no"/>

视口宽度和设备保持一致

视口的默认缩放比例1.0

不允许用户自行缩放

最大运行缩放比例1.0

最小运行缩放比例1.0

3. 二倍图

3.1 物理像素&物理像素比

物理像素值屏幕显示的最小颗粒，是物理真实存在的，厂商在出厂时设置好了

开发时1px不是一定等于1个物理像素的

pc端页面，1个px等于一个物理像素

1个px能够显示物理像素点的个数，称物理像素比或者屏幕像素比

retina（视网膜屏幕）是一种显示技术，把更多的物理像素压缩到一块屏幕里，达到更高的分辨率，提高屏幕显示的细腻长程度

3.2 多倍图

在标准的viewport设置中，使用倍图来提高图片的质量，解决高清设备中模糊问题

通常使用二倍图

// 原始图片时100*100px

img {

width:50px;

height:50px;

}

.box{

background-size:50px 50px ;

}

3.3 背景缩放background-size

background-size: 高度 宽度

只写一个参数，会等比例缩放

里面单位写到%，相对父盒子

cover：要完全覆盖盒子，部分图显示不全

contain：高度宽度等比例拉伸，当一个铺满即可，有空白区域

3.4 多倍图切图cutterman

4. 移动端开发选择

4.1 单独制作移动端页面（主流）（重点）

京东，淘宝、苏宁易购

通常情况下，网址域名前加m（mobile）可以打开移动端，通过判断移动设备，就跳转不同的页面

4.2 响应式页面兼容移动端（其次）

三星....

通过判断屏幕宽度来改变样式，以适应不同的在终端

缺点：制作麻烦，需要花费很大尽力去调兼容性问题

5. 移动端技术解决方案

5.1 移动端浏览器

移动端浏览器以webkit内核为主，考虑它的兼容性即可

放心使用H5和C3

5.2 css初始化 normalize.css

移动端css初始化推荐使用normalize.css

5.3 css盒子模型 box-sizing

box-sizing：border-box

padding和border不会撑大盒子

5.3 特殊样式

  • 链接会点击高亮显示需要清除：
  • -webkit-tap-highlight-color: transparent;
  • 给按钮和输入框自定义样式：
  • -webkit-appearance: none;
  • 禁止长按页面出现菜单：
  • -webkit-touch-callout: none;

6. 移动端常见布局

移动端页面

  1. 分为流式布局（百分比布局）
  2. flex弹性布局
  3. less+rem+媒体查询布局
  4. 混合布局

 响应式页面

  1. 媒体查询
  2. bootstarp

7. 移动端开发之流式布局

就是百分比布局，称非固定像素布局

通过盒子的宽度设置百分比来根据屏幕的宽度来伸缩，不受固定像素的限制，内容像两侧填充

流式布局时移动web开发使用常用的布局方式

max-width 最大宽度；min-width最小宽度

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}section {width: 100%;min-width: 100px;max-width: 900px;margin: 0 auto;}section div {float: left;width: 50%;height: 400px;}div:nth-child(1) {background-color: pink;}div:nth-child(2) {background-color: blue;}</style>
</head><body><section><div></div><div></div></section>
</body></html>

8. 京东移动首页制作

8.1 技术选型

方案：单独制作移动页面方案

技术：流式布局

8.2 搭建文件夹的结构

8.3 设置标签和引入样式

    <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">

8.4 初始化样式

    width: 100%;min-width: 380px;max-width: 1080px;margin: 0 auto;font-family: -apple-system, Arial, Helvetica, sans-serif;line-height: 1.5;color: #666;

8.5 补充：二倍精灵图的做法

先把精灵图缩放一半，再测量坐标，注意background-size也要写

8.6 代码

html文件：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><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>京东</title>
</head><body><header class="app"><ul><li><a href="#"><img src="./images/closes.png" alt=""></a></li><li><a href="#"><img src="./images/logo.png" alt=""></a></li><li><em class="open">打开京东APP</em><em class="close">购物实惠又轻松</em></li><li><a href="#">立即打开</a></li></ul></header><div class="search_warp"><div class="search-btn"></div><div class="search"><div class="jd-icon"></div><div class="sou"></div></div><div class="search-login"><a href="#">登录</a></div></div><!-- 主体内容 --><div class="main"><div class="slider"><img src="./uplaod/ban.jpg" alt=""></div></div><!-- 品牌日 --><!-- <div class="brand"><div><a href="#"><img src="./uplaod/pic1.dpg" alt=""></a></div><div><a href="#"><img src="./uplaod/pic2.dpg" alt=""></a></div><div><a href="#"><img src="./uplaod/pic3.dpg" alt=""></a></div></div> --><div class="brand"><div><a href="#"><img src="./uplaod/pic11.dpg" alt=""></a></div><div><a href="#"><img src="./uplaod/pic22.dpg" alt=""></a></div><div><a href="#"><img src="./uplaod/pic33.dpg" alt=""></a></div></div><!-- nav --><nav><a href="#"><img src="./uplaod/nav1.png" alt=""><span>京东超市</span></a><a href="#"><img src="./uplaod/nav2.png" alt=""><span>数码电器</span></a><a href="#"><img src="./uplaod/nav3.png" alt=""><span>京东服饰</span></a><a href="#"><img src="./uplaod/nav4.png" alt=""><span>京东生鲜</span></a><a href="#"><img src="./uplaod/nav5.png" alt=""><span>京东到家</span></a><a href="#"><img src="./uplaod/nav6.png" alt=""><span>充值缴费</span></a><a href="#"><img src="./uplaod/nav7.png" alt=""><span>物流查询</span></a><a href="#"><img src="./uplaod/nav8.png" alt=""><span>领券</span></a><a href="#"><img src="./uplaod/nav9.png" alt=""><span>领津贴</span></a><a href="#"><img src="./uplaod/nav10.png" alt=""><span>PLUS会员</span></a><!-- new --><div class="news"><a href="#"><img src="./uplaod/new1.dpg" alt=""></a><a href="#"><img src="./uplaod/new2.dpg" alt=""></a><a href="#"><img src="./uplaod/new3.dpg" alt=""></a></div></nav>
</body></html>

css文件：

/*点击高亮我们需要清除清除  设置为transparent 完成透明*/* {-webkit-tap-highlight-color: transparent;
}/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/input {-webkit-appearance: none;
}/*禁用长按页面时的弹出菜单*/img,
a {-webkit-touch-callout: none;
}body {width: 100%;min-width: 380px;max-width: 660px;margin: 0 auto;font-family: -apple-system, Arial, Helvetica, sans-serif;line-height: 1.5;color: #666;}img {/* 解决图片空白缝隙 */vertical-align: top;
}a {text-decoration: none;color: #fff;
}em {font-style: normal;
}.app {height: 50px;
}ul {height: 50px;margin: 0px;padding: 0;list-style: none;background-color: #333;
}.app ul li {float: left;height: 50px;line-height: 50px;text-align: center;}.app ul li:nth-child(1) {width: 8%;
}.app ul li:nth-child(1) img {width: 16px;vertical-align: middle;
}.app ul li:nth-child(2) {width: 10%;
}.app ul li:nth-child(2) img {width: 35px;vertical-align: middle;
}.app ul li:nth-child(3) {position: relative;width: 40%;
}.app ul li:nth-child(3) .open {position: absolute;left: 0;top: -10px;font-size: 12px;color: white;
}.app ul li:nth-child(3) .close {position: absolute;left: 0;bottom: -10px;color: #999;font-size: 12px;
}.app ul li:nth-child(4) {float: right;width: 32%;background-color: #cd2525;}.app ul li:nth-child(4) a {color: white;
}/* 搜索模块 */
.search_warp {position: fixed;overflow: hidden;height: 44px;width: 100%;max-width: 660px;min-width: 560px;/* background-color: rgb(225, 37, 37); */
}.search-btn {position: absolute;top: 0;left: 0;width: 44px;height: 44px;
}.search-btn::before {content: "";display: block;width: 20px;height: 18px;background: url(../images/s-btn.png)no-repeat;background-size: 20px 18px;margin: 14px 0 0 15px;
}.search-login {position: absolute;top: 0;right: 0;width: 40px;height: 44px;line-height: 44px;}.search {position: relative;height: 30px;margin: 0 50px;background-color: #fff;border-radius: 15px;margin-top: 7px;
}.jd-icon {width: 20px;height: 15px;position: absolute;top: 8px;left: 10px;background: url(../images/jd.png) no-repeat;background-size: 20px 15px;
}.jd-icon::after {position: absolute;top: 0;right: -7px;content: '';display: block;width: 1px;height: 15px;background-color: #ddd;
}.sou {position: absolute;top: 8px;left: 50px;width: 18px;height: 15px;background: url(../images/jd-sprites.png) no-repeat -81px 0;background-size: 200px auto;}.slider img {width: 100%;
}/* 品牌日 */
.brand {overflow: hidden;border-radius: 10px 10px 0 0;
}.brand div {float: left;width: 33.3333%;
}.brand div img {width: 100%;
}/* nav */
nav a {float: left;width: 20%;text-align: center;
}nav a img {width: 47px;margin: 10px 0;
}nav a span {display: block;
}nav a {color: #666;
}/* new */
.news {margin-top: 20px;
}.news a {float: left;box-sizing: border-box;
}.news a:nth-child(1) {width: 50%;
}.news a:nth-child(n+2) {width: 25%;border-left: 1px solid #ccc;
}.news img {width: 100%;
}

效果图：

web移动端：流式布局相关推荐

  1. HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)

    文章目录 (1)Flex弹性盒子布局 一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值 设置子项的布局方向(写在父容器上) 3. ...

  2. 移动web学习(一) --- 流式布局, 视口viewpoint ,2倍图和3倍图, less

    从这章开始,学习移动web 移动web开发指的是需要适配移动设备的网页开发,和pc端没有本质的区别,还是使用html,css,js 一.学习移动web的原因 1. 使用移动设备的用户越来越多 2. 一 ...

  3. 移动WEB开发之流式布局-京东案例

    2. 视口 视口(viewport)就是浏览器显示页面内容的屏幕区域. 视口可以分为布局视口.视觉视口和理想视口 2.1 布局视口 layout viewport 视口(viewport)就是浏览器显 ...

  4. pink-移动web开发之流式布局

    改变行高只是改变上下间距的大小, 目标: 知道移动WEB的开发现状 写出标准的viewport 使用移动WEB的调试方法 说出移动端常见的布局方案 描述流式分布 独立完成京东移动端首页 1. 移动端基 ...

  5. 移动WEB开发之流式布局

    第一章:移动端: 1.1 移动端基础 1.2 视口 1.2.1布局视口layout viewport 1.2.2 视觉视口visual viewport 1.2.3  理想视口ideal viewpo ...

  6. 移动web基础：视口(viewport)，流式布局 JDM京东移动端开发

    目标 能够理解视口的概念并进行视口的设置 能够说出流式布局的基本布局特征 能够使用 2倍图进行页面开发 能够实现 京东首页的 头部布局 移动web基础 移动端调试问题 模拟器调试 真机调试:使用手机进 ...

  7. 移动web开发--移动端常见布局+流式布局和flex布局+携程网首页案例

    浏览器私有前缀 为了兼容老版本 私有前缀 -moz- : fixfox 浏览器私有属性 -ms- : ie浏览器私有属性 -webkit- : safari.chrome私有属性 -o- : Oper ...

  8. 01移动端布局基础之流式布局

    技术交流QQ群:1027579432,欢迎你的加入! 1.移动端基础 浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器等. 移动端常见 ...

  9. 移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)

    移动端WEB开发之响应式布局 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...

  10. 移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)

    移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...

最新文章

  1. python自动排课表_【python-leetcode210-拓扑排序】课程表Ⅱ
  2. CAS SSO使用指南
  3. Notification 浏览器右下角弹出提示消息
  4. Corejava -异常
  5. cd linux menu.lst,用ultraiso制作cdlinux的U盘启动盘
  6. git rebase教程
  7. c加加语言编译程序的首要工作是,选择题(综合答案)
  8. 剑指offer（20）包含min函数的栈
  9. c语言编程安全队列,C语言编程队列的实现
  10. lcfirst_PHP lcfirst（）函数与示例
  11. 下载地址jquery upload file demo (C#)
  12. 如何区分用户_如何区分粗沙、中沙、细沙，把粗沙制成细沙需要用什么制砂设备，多少钱？...
  13. php7 xmlreader,PHP扩展之XML操作（四）——XMLReader
  14. 办公软件在多屏宽屏上的应用设想
  15. PAIP。JS调用DLL的解决方案
  16. redies常用命令
  17. Ubuntu 安装 OpenCV（亲测有效）
  18. Java实习日记（8)
  19. 服务器安装找不到RAID卡驱动,DELL R430安装WINDOWS 2008 R2 RAID卡无驱动之无法识别sas硬盘的解决方法...
  20. 【Android】移动端接入Cronet实践

热门文章

  1. Google推出即时通讯软件Hello
  2. html5 模拟scrollview,horizontalScrollView
  3. 捷速pdf修改器如何在pdf中添加附件
  4. 菜鸟教程： Linux cat 命令
  5. Apple M1 开启HiDPI的新方法，无需关闭SIP，无需SwitchResX
  6. chrome插件开发——option(选项页)的通信
  7. python时域转频域_理解波动（三）：从频域到时域
  8. 并发测试工具（ubuntu 16.04）
  9. 苹果手机怎么无线投屏？苹果手机无线投屏到电脑
  10. 【安装】安装OpenCV简易教程