重学前端之移动端网页开发

时间：2023-05-27 22:30:01 | 来源：网站运营

时间：2023-05-27 22:30:01 来源：网站运营

重学前端之移动端网页开发：前端学习路径及基础学习教程目录




一、移动端开发基础

1、移动web开发基础

浏览器现状

PC端常见浏览器 谷歌浏览器、360浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器

移动端常见浏览器 UC浏览器、QQ浏览器、谷歌浏览器、Opera浏览器、百度手机浏览器、搜狗手机浏览器、猎豹浏览器，以及其他手机自带浏览器。

国内的UC和QQ、百度等手机浏览器都是根据webkit修改过来的内核，国内没有自主研发的内核，就像国内的手机操作系统都是基于Android修改开发一样。

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

手机屏幕现状

移动端设备屏幕尺寸非常多，碎片化严重。

Android设备有多种分辨率：480*800,480*854,540*960,720*1280,1080*1920等，还有传说中的2K，4K屏。

近年来iphone的碎片化也加剧了，其设备的主要分辨率有：640*960，640*1136，750*1334，1242*2280等。

我们开发中常用的尺寸单位是px。

常见移动端屏幕尺寸

移动端调试方法

Chrome DevTools（谷歌浏览器）的模拟手机调试

搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器

使用外网服务，直接IP或域名访问

总结

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

现在开发的移动端主要针对手机端开发

移动端分辨率和屏幕尺寸大小不一，主要关注开发尺寸 用谷歌浏览器模拟手机界面以及调试

2、视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。

视口可以分为布局视口、视觉视口和理想视口。

布局视口layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

IOS,Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

视觉视口visual viewport

它是用户正在看到的网站的区域。 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

理想视口ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定

理想视口，对设备来讲，是最理想的视口尺寸

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

<meta>视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们的布局视口就多宽。

<meta>视口标签

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> 标准的viewport参数设置

视口宽度与设备保持一致 视口的默认缩放比例1.0 不允许用户自行缩放

最大允许的缩放比例1.0 最小允许的缩放比例1.0

总结

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

移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽 想要理想视口，需要给移动端页面添加<meta>视口标签




3、物理像素和物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了，比如苹果6、7、8是750*1334

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

PC端页面，1个px等于1个物理像素，但是移动端就不尽相同

一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

物理像素和物理像素比

PC端和早前的手机屏幕/普通手机屏幕：1CSS像素=1物理像素

Retina（视网膜屏幕）是一种显示技术，可以将更多的物理像素点压缩至一块屏幕里， 从而达到更高的分辨率，并提高屏幕显示的细腻程度。




4、二倍图

多倍图

对于一张50px*50px的图片，在手机Retina屏中打开，按照物理像素比会放大倍数，这样会造成图片模糊。

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

通常使用二倍图，因为iphone6/7/8的影响，但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求

背景图也需要用高倍图，注意缩放问题，background-size

解决方法：使用本身是100*100的图片替换原来50*50的图片，设置图片尺寸为50*50

//图片本身是100px*100px img{width:50px;height:50px;} .box{background-size:50px 50px} 多倍图切图 @3X 3倍图 @2X 2倍图 @1X 1倍原图

5、移动端开发选择

移动端主流方案

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

京东商城手机版

淘宝触屏版

苏宁易购手机版

携程网手机版 等

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

三星手机官网 等

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

通常情况下，网址域名前加m（mobile）可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。

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

响应式网站：即PC和移动端共用一套网站，只不过在不同宽度的屏幕下，样式会自动适配。 三星电子官网:http://www.samsung.com/cn/，通过判断屏幕宽度来改变样式，以适应不同终端。

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




6、移动端常见问题解决方案

浏览器

移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题。 可以放心使用html5的标签和CSS3样式。 浏览器的私有前缀只需要考虑添加-webkit-即可。

CSS初始化normalize.css

移动端CSS初始化推荐使用normalize.css。是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一，是一种现代的、为HTML5准备的优质替代方案。

优点： 保护了有价值的默认值 修复了浏览器的bug，解决了浏览器的不一致的默认样式 normalize.css是模块化的，提高了易用性 normalize.css拥有详细的文档

官网地址：http://necolas.github.io/normalize.css/

CSS3盒子模型box-sizing

传统模式宽度计算：盒子的宽度=CSS中设置的width+border+padding

CSS3盒子模型：盒子的宽度=CSS中设置的宽度width里面包含了border和padding 也就是说，CSS3中的盒子模型，padding和border不会撑大盒子。

CSS3盒子模型 box-sizing:border-box; 传统盒子模型 box-sizing:content-box; 特殊样式 //CSS3盒子模型 box-sizing:border-box -webkit-box-sizing:border-box //点击高亮需要清除默认 -webkit-tap-highlight-color:transparent; //在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式 -webkit-appearance:none; //禁用长按页面时的弹出菜单 img,a{-webkit-touch-callout:none;}


7、移动端技术选型

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

流式布局（百分比布局）

flex弹性布局（强烈推荐）

less+rem+媒体查询布局 混合布局

响应式页面兼容移动端（其次） 媒体查询 bootstrap




二、流式布局-京东项目

1、流式布局原理

流式布局（百分比布局）

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

<style> section{width:100%;height:100px;background:pink} div{float:left;width:50%; height:80px;border:10px solid #0f0f;box-sizing: border-box;} </style> <section> <div>1</div> <div>2</div> </section> 注意事项 需要定义页面的最大和最小支持宽度。 max-width最大宽度（max-height最大高度） min-width最小宽度（min-height最小高度）




2、京东移动端首页准备工作

地址：http://m.jd.com

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

技术：布局采取流式布局 搭建相关文件夹结构

设置视口标签以及引入初始化样式

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum=1.0,minimum=1.0"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/index.css"> 常用初始化样式 body{min-width:320px;max-width:540px;margin:0 auto;background:#fff;font:14px/1.5 "-apple-system","Helvetica","sans-serif";color:#666} 特殊样式 /*清除点击高亮*/ *{-webkit-tap-highlight-color: transparent;} /*ios下可以给按钮和输入框自定义样式*/ input{-webkit-appearance: none;} /*禁用长按页面时的弹出菜单*/ img,a{-webkit-touch-callout: none;} 3、京东首页-tips区域布局

4、京东首页-tips区域内容填充

5、京东首页-搜索框布局

6、京东首页-搜索框内容填充

7、二倍精灵图做法

在fireworks里面把精灵图等比例缩放为原来的一半 之后根据新的大小，测量坐标 background-size要写成精灵图原来宽度的一半

8、京东首页-焦点图布局

9、线形渐变背景

在MDN文档里搜索相关用法 developer.mozilla.org/zh-CN/ 搜索框里输入相关关键词，查找用法

10、京东首页-滑动轮播图布局

图片格式

DPG图片压缩技术

京东自主研发推出DPG图片压缩技术，经测试该技术，可直接节省用户近50%的浏览器流量，极大的提升了用户的网页打开速度。通过兼容jpg，实现全平台、全部浏览器的兼容支持，经过内部和外部上万张图片的人眼浏览测试后发现，压缩后的图片和webp的清晰度对比没有差距

webp图片格式

谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有jpg的2/3，并能节省大量的服务器宽带资源和数据空间。

11、京东首页-优惠活动布局

12、京东首页-超市导航布局

13、京东首页-新人专享

14、京东移动端首页-结束




三、flex布局-携程网项目

1、flex布局体验

传统布局

兼容性好 布局繁琐 局限性，不能在移动端很好的布局

flex布局

操作方便，布局极为简单，移动端应用广泛 PC端浏览器支持情况差 IE11或更低版本，不支持或部分支持

<style> section{width:800px;height:100px;background:pink;display:flex;justify-content: space-around;;} span{width:150px; height:80px;background:#666;margin-right:10px;flex:1;} </style> <section> <span>1</span><span>2</span><span>3</span> </section> 2、flex布局原理

flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 当为父盒子设为flex布局以后，子元素的float，clear和vertical-align属性将失效。 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局 采用flex布局的元素，称为flex容器（flex container），简称”容器“。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称”项目“。

flex布局原理：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

flex布局父项常见属性

以下6个属性是对父元素设置的

flex-direction:设置主轴的方向

justify-content:设置主轴上的子元素排列方式

flex-wrap:设置子元素是否换行

align-content:设置侧轴上的子元素的排列方式（多行）

align-items:设置侧轴上的子元素排列方式（单行）

flex-flow:复合属性，相当于同时设置了flex-direction,flex-wrap

3、flex-direction 设置父容器主轴方向

主轴与侧轴 在flex布局中，是分为主轴和侧轴两个方向， 同时的叫法有：行和列，x轴和y轴 默认的主轴方向是x轴方向，水平向右 默认的侧轴方向是y轴方向，垂直向下

flex-direction属性决定主轴的方向（即项目的排列方向）

注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。

4、justify-content 设置主轴上子项目对齐

justify-content 属性定义了项目在主轴上的对齐方式 注意：使用这个属性之前一定要确定好主轴是哪个

5、flex-wrap设置子项目是否换行

默认情况下，项目都排在一条线（轴线）上。 flex-wrap属性定义flex布局中默认是不换行。

6、align-items 设置侧轴单行子项目对齐

该属性是控制子项在侧轴（默认是Y轴）上的排列方式 在子项为单项（单行）的时候使用

7、align-content设置侧轴多行子项目对齐

设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。

align-content和align-items区别

align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸 align-content适用于多行情况下（单行无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。 总结就是单行找align-items，多行找align-content

8、flex-flow 复合属性

flex-flow属性是flex-direction和flex-wrap属性的复合属性

flex-flow:row nowrap;

9、flex 设置子项的份数

flex布局子项常见属性

flex子项目占的份数

align-self控制子项自己在侧轴的排列方式

order属性定义子项的排列顺序（前后顺序）

flex属性 flex属性定义子项目分配父盒子的剩余空间，用flex来表示占多少份数。 属性值为数字，数字为1，表示占总份数中的1份。默认值为0. .item{flex:<number>;/*default 0*/}

10、子项的align-self和order属性

align-self控制子项自己在侧轴上的排列方式 align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 span:nth-child(2){align-self:flex-end;}

order属性定义项目的排列顺序 数值越小，排列越靠前，默认为0，想往前移可以为负，想往最后，比其他都大 注意：和z-index不一样。

item{order:<number>;}

11、携程网首页-初始设置

官网：http://m.ctrip.com

方案：单独制作移动页面

技术：布局采取flex布局 搭建文件夹结构

初始的页面结构和CSS样式

12、携程网首页-模块分析和命名 常见模块命名




13、携程网首页-搜索框布局

14、携程网首页-搜索框内容填充

15、携程网首页-login登录内容

常见flex布局思路

16、携程网首页-焦点图布局

17、携程网首页-local-nav布局

18、携程网首页-nav公共结构布局

19、携程网首页-nav特殊结构布局

20、携程网首页-subnav-evtry布局

21、携程网首页-热门活动顶部布局

22、携程网首页-热闹活动底部布局

23、携程网首页-总结

1、flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

2、flex布局常用父项、子项属性。




四、rem布局-苏宁项目

1、rem适配布局导读

2、rem单位

思考 1、页面布局文字能否随着屏幕大小变化而变化？

2、流式布局和flex布局主要针对于宽度布局，那高度如何设置?

3、怎样让屏幕发生变化的时候元素高度和宽度等比例缩放？

rem单位 rem(root em)是一个相对单位，类似于em，em是父元素字体大小。

不同的是rem的基准是相对于<html>元素的字体大小。 比如，根元素（html）设置font-size:12px;非根元素设置width:2rem; 转换成px表示就是24px。

rem的优势：父元素文字大小可能不一致，但是整个页面只有一个<html>，可以很好的来控制整个页面的元素大小比例。

<style> *{margin:0;padding:0;} html{font-size:20px} .box{width:10rem;height:10rem;background:pink;} .box1{width:5rem;height:5rem;background:skyblue} </style> <div class="box"> <div class="box1"></div> </div> 3、媒体查询书写语法

媒体查询是CSS3新增语法。 使用@media查询，可以针对不同的媒体类型定义不同的样式。 @media可以针对不同的屏幕尺寸设置不同的样式。 重置浏览器大小的过程中，页面也会根据浏览器的宽高重新渲染 目前很多苹果手机、安卓手机，平板等设置都可以用媒体查询

语法规范

用@media开头 注意@符号 mediatype媒体类型 关键字 and not only media feature媒体特性，必须有小括号包含

@media mediatype and|not|only (media feature){csscode}

mediatype媒体类型 将不同的终端设备划分成不同的类型，称为媒体类型。

关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

and:可以将多个媒体特性连接到一起，相当于“且”的意思。

not:排除某个媒体类型，相当于“非”的意思，可以省略。

or:可以测试多个媒体查询的条件，只要有一个条件成立，就执行，"或“的意思。

only:指定某个特定的媒体类型，可以省略。 媒体特性 每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。

先介绍三个。 注：要加小括号进行包含。

@media screen and (min-width:800px){ body{background:pink} } @media screen and (max-width:600px){ body{background:forestgreen} } 4、媒体查询案例-背景变色

案例：根据页面宽度改变背景颜色

实现思路：

1、按照从大到小的或者从小到大的思路

2、注意我们有最大值max-width和最小值min-width都是包含等于的

3、当屏幕小于540像素，背景颜色为蓝色（x<=539）

4、当屏幕大于等于540像素，并且小于等于969像素的时候背景颜色为绿色（540=<x<=969）

5、当屏幕大于等于970像素的时候，背景颜色为红色（x>=970） 媒体查询从小到大优势代码分析

5、媒体查询和rem实现元素变化

媒体查询+rem实现元素动态大小变化 rem单位是跟着<html>来走的，有了rem页面元素可以设置不同大小尺寸

媒体查询可以根据不同设备宽度来修改样式 媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化

<style> *{margin:0;padding:0;} html{font-size:20px;} @media screen and (min-width:639px) { html{font-size:30px;} } .box{width:100%;height:3rem;line-height:3rem;background:skyblue;font-size:1.5rem;color:#fff;text-align:center;font-weight: bold;} </style> <div class="box">购物车</div> 6、媒体查询引入资源方法

当样式比较繁多的时候，我们可以针对不同的媒体使用不同的stylesheets（样式表）. 原理，就是直接在<link>中判断设备的尺寸，然后引用不同的css文件。 1、语法规范 <link rel="stylesheet" media="mediatype and | not | only (media feature)" href="mystylesheet.css"> 2、示例 <link rel="stylesheet" href="style.css" media="screen and (min-width:400px)"> <style> *{margin:0;padding:0;} @media screen and (min-width:320px) { html{font-size:30px;} div{width:100%;height:100px;} .box1{background:pink} .box2{background:skyblue} } @media screen and (min-width:640px) { html{font-size:30px;} div{float:left;width:50%;height:100px;} .box1{background:pink} .box2{background:skyblue} } </style> <div class="box1">1</div> <div class="box2">2</div>

7、CSS的弊端

CSS是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念 CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的。 不方便维护及扩展，不利于复用。 CSS没有很好的计算能力。 非前端工程师，很难写出组织良好且易于维护的CSS代码。

8、LESS简介和安装

Less介绍

Less（Leaner Style Sheets的缩写）是一门CSS扩展语言，也称为CSS预处理器。 做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。 它在CSS的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称，Less可以让我们用更少的代码做更多的事情。

Less中文网址：http://lesscss.cn/

常见的CSS预处理器：Sass,Less,Stylus

Less是一门CSS预处理语言，它扩展了CSS的动态特性。

Less安装

1、安装nodejs，可选择最新版本，网址：http://nodejs.org/en/download/

2、检查是否安装成功，使用cmd命令，输入 node -v查看版本

3、基于node.js在线安装Less，使用cmd命令 npm install -g less即可

4、检查是否安装成功，使用cmd命令lessc -v查看版本即可

9、LESS变量

Less使用

首先新建一个后缀名为.less的文件，在这个.less文件里面书写Less语句。

Less变量 Less编译 Less嵌套 Less运算 Less变量

变量是指没有固定的值，可以动态改变的。因为我们CSS中的一些颜色和数值等经常会变化。 @变量名:值;

1、变量命名规范 必须有@为前缀 不能包含特殊字符 不能以数字开头 大小写敏感 @color:pink;

2、变量使用规范 body{color:@color;} a:hover{color:@color;}

10、LESS编译和VS CODE 插件

Less编译

本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。 所以，我们需要把.less文件，编译生成为.css文件，这样HTML页面才能用。

推荐方法（nodejs）：在当前文件夹，使用CMD命令lessc style.less>style.css

VScode Less插件

Easy LESS插件用来把less文件编译为css文件 安装完插件，重新加载一下vscode 只要保持一下Less文件，会自动生成CSS文件。

11、LESS嵌套

我们经常用的选择器

#header .logo{width:300px;}

#header{ .logo{width:300px;} }

如果遇见（交集|伪类|伪元素选择器）

内层选择器的前面没有&符号，则它被解析为父选择器的后代。 如果有&符合，它就被解析为父元素自身或父元素的伪类。

我们常用的选择器 a:hover{color:red}

less嵌套写法 a{ &:hover{color:red} }

.header{ width:200px; height:200px; background:pink; .logo{ width:100px; height:100px; background:green; } } .nav{ width:200px; a{ display:block; &:hover{color:pink} &.box{background:yellowgreen;} } } 12、LESS运算

任何数字、颜色或者变量都可以参与运算。Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

@widthh:10px+5; div{border:@widthh solid red;} width:(@width+5)*2;

注意： 参与运算的两个数字，一个可以有单位，一个可以没单位，最后为有单位的 参与运算的两个数字，都有单位，最终取第一个的单位 less的运算符左右要加空格 乘号*和除号/的写法，除法要用（）括号括起来，否则可能不起作用

@basefont:50px; html{font-size:50px;} div{ width : (200rem / @basefont); background:#999-666; } 13、rem适配原理

思考

我们适配的目标是什么？ 怎么去达到这个目标的？ 在实际的开发当中使用？

答案

让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化 ，从而达到等比缩放的适配。

rem实际开发适配方案

1、按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小；（媒体查询）

2、CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值。 rem适配方案技术使用（市场主流）

技术方案1 less 媒体查询 less

技术方案2（推荐） flexible.js rem

总结: 1、两种方案现在都存在。 2、方案2更简单。

14、rem适配方案1-实现技巧

rem实际开发适配方案1

rem+媒体查询+less技术

1、设计稿常见尺寸宽度

一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果，现在基本以750为准。

具体方案：

动态设置html标签font-size大小

1、假设设计稿是750px

2、假设我们把整个屏幕划分为15等份（划分标准不一，可以是20等份，也可以是10等份）

3、每一份作为html字体大小，这里就是50px

4、那么在320px设备的时候，字体大小为320/15就是21.33px

5、用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的

比如我们以750为标准设计稿：

1、一个100*100像素的页面元素在750屏幕下，就是100/50转换为rem是2rem*2rem比例是1:1

2、320屏幕下，html字体大小为21.33则2rem=42.66px，此时宽和高都是42.66，但是宽和高的比例还是1:1

3、已经能实现不同屏幕下，页面元素盒子等比例缩放的效果




元素大小取值方法

1、最后的公式：页面元素的rem值=页面元素值（px）/(屏幕宽度/划分的份数)

2、屏幕宽度/划分的份数，就是html font-size的大小

3、页面元素的rem值=页面元素值（px）/ html font-size

<style> @media screen and (min-width:320px) { html{font-size:21.33px} } @media screen and (min-width:750px) { html{font-size:50px} } /*宽高为100px*/ .box{width:2rem;height:2rem;background:pink;} </style> <div class="box">1</div>


15、苏宁首页-公共common.less文件制作

官网：http://m.suning.com

方案：单独制作移动页面

技术：布局采取rem适配布局（less+rem+媒体查询）

设计图：采用750px设计尺寸




搭建相关文件夹结构

页面初始的结构和样式


设置公共common.less文件

1、新建common.less设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要。

2、苏宁网站首页的开发尺寸有320px,360px,375px,384px,400px,414px,424px,480px,540px,720px,750px等。

3、划分的份数我们定为15等份。

4、默认html大小为50px

@no:15;html{ font-size:50px;}//320px@media screen and (min-width:320px) { html{ font-size:(320px/@no); }}//360px@media screen and (min-width:360px) { html{ font-size:(360px/@no); }}


16、苏宁首页-@import导入less文件

1、新建index.less文件，写首页的样式

2、将刚才设置好的common.less引入到index.less里面

语法如下：

//在index.less中导入common.less文件

@import "common"

3、生成index.css引入到index.html里面




17、苏宁首页-body样式

18、苏宁首页-top-banner区域

19、苏宁首页-header结构布局

20、苏宁首页-header-top区域内容

21、苏宁首页-search部分

22、苏宁首页-banner区域

23、苏宁首页-nav区域

24、适配方案2-flexible.js介绍

简洁高效的rem适配方案flexible.js

手机淘宝团队出的移动端适配库

不需要写不同屏幕的媒体查询，在js里做了处理

它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。

我们要做的，就是确定好我们当前设备的html文字大小。

比如当前设计稿是750px，我们只需要把html文字大小设置为75px(750px/10)就可以。

页面元素rem值：页面元素的px值/75

剩余的，让flexible.js来算


下载地址：http://github.com/amfe/lib-flexible




25、适配方案2-更改flexible.js默认字号

26、适配方案2-制作苏宁首页和cssrem插件

官网：m.suning.com

方案：单独制作移动页面

技术：布局采取rem适配布局2（flexible.js+rem）

设计图：采用750px设计尺寸




初始结构和样式

vscode px转换rem插件 cssrem

27、rem适配方案总结




五、响应式布局-阿里百秀项目

1、移动web响应式开发导读

知道响应式原理

使用媒体查询完成响应式导航

使用Bootstrap的栅格系统

使用Bootstrap的响应式工具

完成阿里百秀首页




2、响应式开发布局原理

使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备。

3、响应式布局容器

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。




平时我们的响应式尺寸划分

超小屏幕 （手机，小于768px）：设置宽度为100%

小屏幕（平板，大于等于768px）：设置宽度为750px

中等屏幕（桌面显示器，大于等于992px）：宽度设置为970px

大屏幕（大桌面显示器，大于等于1200px）：宽度设置为1170px




也可以根据实际情况自定义划分。

<style> *{margin:0;padding:0} .box{height:100px;margin:0 auto;} @media screen and (max-width:767px) { .box{width:100%;background:pink;} } @media screen and (min-width:768px) { .box{width:750px;background:blue;} } @media screen and (min-width:992px) { .box{width:970px;background:green;} } @media screen and (min-width:1200px) { .box{width:1170px;background:yellowgreen;} } </style> <div class="box">1</div>


4、响应式导航案例

需求分析

1、当我们屏幕大于等于800像素，我们给nav宽度为800px，因为里面子盒子需要浮动，所以nav需要清除浮动。

2、nav里面包含8个小li盒子，每个盒子的宽度定为100px，高度为30px，浮动一行显示。

3、当我们屏幕缩放，宽度小于800像素的时候，nav盒子宽度修改为100%宽度。

4、nav里面的8个小li，宽度修改为33.33%，这样一行就只能显示3个小li，剩余下行显示。




<style> *{margin:0;padding:0} .nav{width:800px;margin:0 auto;background:green;overflow:hidden;list-style:none;} .nav li{float:left;width:100px;height:30px;font-size:16px;text-align: center;line-height:30px;color:#fff;} @media screen and (max-width:799px) { .nav{width:100%} .nav li{width:33.33%} } </style> <ul class="nav"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>
5、Bootstrap简介

Bootstrap来自Twitter（推特），是目前最受欢迎的前端框架。Bootstrap是基于HTML,CSS和JS的，它简洁灵活，使得WEB开发更加快捷。

中文官网：http://www.bootcss.com

官网：http://getbootstrap.com

框架：就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

Bootstrap优点

标准化的html+css编码规范

提供了一套简洁、直观、强悍的组件

有自己的生态圈，不断的更新迭代

让开发更简单，提高了开发的效率




Bootstrap版本

2.x.x:停止维护，兼容性好，代码不够简洁，功能不够完善。

3.x.x:目前使用最多，稳定，但是放弃了对IE6,7,8的支持。偏向用于开发响应式布局、移动设备优先的WEB项目。

4.x.x:最新版，目前还不是很流行。




6、Bootstrap的使用方法

要按照框架所规定的规范进行开发。

Bootstrap使用四步曲：

1、创建文件夹结构

2、创建html骨架结构

3、引入相关样式文件

4、书写内容




1、创建文件夹结构

2、创建html骨架结构

在官方文档起步里找到基本模板做为初始结构


<!--要求当前网页使用IE浏览器最高版本的内核来渲染--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放--> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0"> <!--[if lt IE 9]> 解决IE9以下浏览器对HTML5新增标签的不识别，并导致CSS不起作用的问题 <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> 解决IE9以下浏览器对CSS3 Media Query的不识别 <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> </head>


3、引入相关样式文件

<!-- Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


4、书写内容

直接拿Bootstrap预先定义好的样式来使用

修改Bootstrap原来的样式，注意权重问题

学习Bootstrap的关键在于知道它定义了哪些样式，以及能实现什么效果




7、Bootstrap布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器，它提供了两个作此用处的类。




.container类

响应式布局的容器，固定宽度

大屏（>=1200px）宽度定为1170px

大屏（>=992px）宽度定为970px

大屏（>=768px）宽度定为750px

超小屏（100%）




.container-fluid类

流式布局容器，百分百宽度

占据全部视口(viewport)的容器

适合于制作移动端页面




8、Bootstrap栅格系统简介

栅格系统英文为"grid systems"，也有人翻译为”网格系统“，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面。

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。







9、Bootstrap栅格系统使用方法

栅格选项参数

栅格系统用于通过一系列的行和列的组合来创建页面布局，内容可以放下这些创建好的布局中。


按照不同的屏幕划分1-12等份

行可以去除父容器作用15px的边距

xs-extra small：超小；sm-small：小；md-medium：中；lg-large：大；

列大于12，多余的列所在的元素将被作为一个整体另起一行排列

每一列默认有左右15像素的padding

可以同时为一列指定多个设备的类名，以便划分不同份数 例如class="col-md-4 col-sm-6"

<div class="container"> <div class="row"> <div class="col-lg-3 col-md-6"></div> <div class="col-lg-3 col-md-6">12</div> <div class="col-lg-3 col-md-6">12</div> <div class="col-lg-3 col-md-6">12</div> </div> <div class="row"> <div class="col-lg-6">12</div> <div class="col-lg-2">12</div> <div class="col-lg-2">12</div> <div class="col-lg-2">12</div> </div> </div>


10、Bootstrap栅格系统-列嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小例。我们可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。

<div class="row"> <div class="col-lg-3 col-md-6 row"> <p class="col-lg-6">1</p> <p class="col-lg-6">2</p> </div> <div class="col-lg-3 col-md-6">12</div> <div class="col-lg-3 col-md-6">12</div> <div class="col-lg-3 col-md-6">12</div> </div>


11、Bootstrap栅格系统-列偏移

使用.col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距（margin）

<div class="container"> <div class="row"> <div class="col-lg-4">12</div> <div class="col-lg-4 col-lg-offset-2">34</div> <div class="col-lg-8 col-lg-offset-2">12</div> </div> </div>


12、Bootstrap栅格系统-列排序

通过使用.col-md-push-*往右推和.col-md-pull-*往左拉两个类就可以很容易的改变列（column）的顺序。




<div class="container"> <div class="row"> <div class="col-lg-4 col-lg-push-8">12</div> <div class="col-lg-8 col-lg-pull-4">34</div> <div class="col-lg-8 col-lg-push-2">56</div> </div> </div>


13、Bootstrap响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。


与之相反的，visible-xs,visible-sm,visible-md,visible-lg是针对不同设备显示某个内容。




<div class="container"> <div class="row"> <div class="col-lg-4 col-lg-push-8 hidden-sm">12</div> <div class="col-lg-8 col-lg-pull-4">34</div> <div class="col-lg-8 col-lg-push-2 visible-lg">56</div> </div> </div>


Bootstrap其他（按钮、表单、表格）请参考Bootstrap文档。




14、阿里百秀-屏幕划分分析




方案：采取响应式页面开发方案

技术：Bootstrap框架

设计图：采用1280px设计尺寸

屏幕划分分析：

1、屏幕缩放发现中屏幕和大屏幕布局是一致的。因此列定义为col-md-就可以了，md是大于等于970以上的。

2、屏幕缩放发现小屏幕布局发生变化，因此需要为小屏幕根据需求改变布局

3、屏蔽缩放发现超小屏幕布局又发生变化，因此需要为超小屏蔽根据需求改变布局

4、策略：先布局md以上的pc端布局，最后根据实际需求再修改小屏幕和超小屏幕的特殊布局样式。




15、阿里百秀-网页制作准备工作

Bootstrap使用四步曲：

1、创建文件夹结构

2、创建html骨架结构

3、引入相关样式文件

4、书写内容


16、阿里百秀-container容器宽度修改

因为效果图采取了1280的宽度，而Bootstrap里面container宽度最大为1170px，因此需要手动修改container宽度

@media screen and (min-width:1280px) { .container{width:1280px;}}
17、阿里百秀-主体结构搭建

18、阿里百秀-logo区域

19、阿里百秀-nav导航区域

20、阿里百秀-news区域

21、阿里百秀-publish区域

22、阿里百秀-aside区域

23、阿里百秀-header区域响应式制作

24、阿里百秀-main区域响应式制作

25、移动web开发总结


移动端技术选型

流式布局（百分比布局）

flex弹性布局（推荐）

rem适配布局（推荐）

响应式布局


建议：选取一种主要技术选型，其他技术做为辅助，这种混合技术开发。