HTML5学习笔记 —— 移动端开发要点

时间:2021-08-05 14:47:58

一、调试方式

1.模拟器调试(谷歌控制台)
2.真机调试

a.本地服务器启动,通过localhost进行访问
b.设置需调试的手机分辨率
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta name="viewport" content="width=320px">
c.真机调试
1)电脑的本地服务器启动,且切换为在线模式
2)测试用手机和电脑处于同一个局域网
3)通过IP进行访问(运行-cmd-ipconfig)

二、书写代码注意点

1.按照正常PC端书写(如设计图给出的是960px宽度,36px基准字体,则按照正常px进行编写)
2.相应的px转换为百分比(横向)/rem(纵向)

24/640转换为2400/640 ctrl+shift+Y + %,因系统会自动对24/640进行四舍五入保留小数点后2位,直接计算的数字不精确

3.图像以及特殊字体的处理
4.嵌套规则与SEO的细节调整

a标签可以套块元素
img的title(提示性文本,用于SEO)属性删掉,因为移动端没有hover状态

5.fixed用法

利用position: fixed固定头部和底部内容

三、CSS3提供的新单位

rem     针对html(根元素)的字体大小进行比例计算
rem * rem —— 部分设备不支持,横向rem解读有无
建议使用:横向百分比、纵向rem
盒模型:主要影响line-height、font-size

ch 字符0(零)的宽度
vw viewport width 1vw = 视窗宽度的1%
vh viewport height 1vh = 视窗宽度的1%
vmin vw和vh中较小的那个

四、移动端设计流程

1.拿到设计图

a.设计师提供图纸为最大分辨率(一般为960px、1080px、640px),需要向下兼容小分辨率
b.确定页面中的字体大小是否符合规范
1)字体是否偶数、整数
2)最小字体 —— 320px屏幕宽度下 >= 12px,1080px屏幕宽度下 >= 42px(字体大小为1080*(12/320)=40.5,取偶数、整数并向上取整)

2.重置视口 —— viewport

<meta name="viewport" content="属性值">
width 设置布局视口的宽度
height 设置布局视口的高度
initial-scale 设定页面初始缩放比例(0~10.0,1表示百分百——原始状态)
minimum-scale 设定最小缩小比例(0~10.0)
maximum-scale 设定最大放大比例(0~10.0)
user-scalable 设定用户是否可以缩放(yes/no)
举例:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
initial-scale=1一般可省略

a.让视窗大小和设备宽度保持一致
b.尽可能对用户的一些操作进行限制(放大、缩小页面)

3.根据设备宽度改变根元素的字体大小

html元素的font-size大小→JS文件辅助
辅助原理:
检测到当前的屏幕宽度 设计图的屏幕宽度
---------------- = -----------------
要计算出的字体大小 设计图最小字体大小

a.JS文件的引入 —— 放在head里(zepto在common之前)
<script type="text/javascript" src="js/flexible.js"></script>
b.JS文件的修改
修改flexible.js的屏幕宽度和相应字体大小

五、移动端视口处理

1.视口处理原理

通过viewport把自己冒充成更宽的屏幕,大多数移动浏览器默认把布局视口的宽度设为:980px(IE10默认设定为1024px)。
然后,尽可能放大视口,(布局视口宽度保持不变)以便在屏幕中显示完整的网站。

2.常见视口宽度

a.iPhone —— 980
b.iPad —— 1024
c.Android —— 980
d.WinPhone —— 1024

3.设置需调试的手机分辨率

<meta name="viewport" content="width=320px">
<meta name="viewport" content="属性值">
width 设置布局视口的宽度
height 设置布局视口的高度
initial-scale 设定页面初始缩放比例(0~10.0,1表示百分百——原始状态)
minimum-scale 设定最小缩小比例(0~10.0)
maximum-scale 设定最大放大比例(0~10.0)
user-scalable 设定用户是否可以缩放(yes/no)
举例:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
initial-scale=1一般可省略

a.让视窗大小和设备宽度保持一致
b.尽可能对用户的一些操作进行限制(放大、缩小页面)

六、自身样式处理——盒模型

1.处理原则

横向百分比、纵向rem

2.横向处理

根据父级宽度计算百分比

3.纵向处理

rem     针对html(根元素)的字体大小进行比例计算

4.横向为何不用rem?

rem * rem —— 部分设备不支持,横向rem解读有无

5.纵向为何不用%?

纵向使用百分比时,根据父级宽度进行计算。
即针对最近的块祖级元素的文字显示方向而定。
如果文字显示方向是水平方向,即margin和padding(横纵)根据宽度计算;如果文字显示方向是垂直方向,则margin和padding(横纵)根据高度计算。
目前文字垂直方向显示只有IE支持。

如下代码为等价:
        .box {
width: 400px;
height: 100px;
}

.con {
width: 50%;
height: 20%;
padding: 20%;
}

.con {
width: 200px;
height: 20px;
padding: 80px;
}

七、文本样式处理

line-height:针对元素自身字体尺寸进行计算,如果当前元素字体大小为16,则line-height:100% == line-height: 16px;
em、rem 相对度量单位
em 针对父级元素的字体大小进行比例计算

八、图像的特殊处理

background-size:    用于定义背景图尺寸大小
属性取值范围:
a.固定/绝对度量单位 —— 如px
b.相对度量单位 —— 如百分比% rem
c.auto(自动) —— cover contain
1)cover:覆盖全部容器,此时背景图有可能无法完全显示
2)contain:覆盖容器,但当宽或高任意一个达到最大值则停止拉伸,容器有可能产生空白区域
background-size: 100% 100%; (水平方向 垂直方向)
background-size: contain;
background-size: cover;

九、字体的特殊处理

字体自定义:

        @font-face {
font-family: 'newfont';
src: local ('STXINWEI'),
url(font/STXINWEI.TTF) format('truetype'),
url(STXINWEI.oft) format('truetype')
;
/*可定义多个字体,浏览器按顺序下载,若第一个字体可用,则不会下载第二个,若不可用,则依次向下下载*/
}

.con div {
font-family: 'newfont';
/*调用字体*/
}
a.@font-face用于定义一个“用户/自定义字体”需要有字体名字(font-family),以及字体的路径属性(src)
b.local用于定义用户本地的字体名称,当用户本地已经存在同样的字体时,则不再下载(可以节省网上下载的流量和成本)
c.url属性,用于书写自定义字体的路径(在服务器端),如果浏览器在本地当中没有找到字体,会将url中设置的字体加载到页面当中。
d.format 用于提示该资源url所引用的字体格式
e.truetype .ttf
f.opentype .ttf .oft

十、嵌套规则细节调整

a标签可以套块元素 —— 节省代码、方便用户点击没有hover的状态
a标签,点击区域的灰色阴影需要去掉,如下
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

十一、SEO的细节调整

img的title(提示性文本,用于SEO)属性删掉,因为移动端没有hover状态

十二、响应式布局

Responsive  Web  Design
将已有的开发技巧(弹性-使用百分比的布局、弹性图片-background-size、媒体、媒体查询)整合起来,命名为响应时网页设计。
是一种针对任意设备,均能够“完美”布局的一种现实机制。
简言之,一个网站能够兼容多个终端,而不是为每个终端制作一个特定版本。

1.响应式布局流程
a.进行视口控制
b.利用CSS3媒体查询(CSS3 Media Query)告知浏览器如何为指定的视图宽度渲染页面。(为不同宽度制定不同的CSS,实现不同的布局)
c.对于临界值/断点(媒体查询的取值)之间,采用百分比、em、rem等相对度量单位实现过渡。
1)断点: 样式发生瞬间变化的px值大小(@media中的值)通常采用的断点,是各个设备的横屏、纵屏最大值
320 480 640 768 1024 1280 1366 1600 1920
2)通常对于多个分辨率书写时,遵循渐进增强的原则,即从移动端开始。
先书写基准样式(通常样式),再书写移动端样式,最后书写桌端样式(屏幕分辨率由小到大)
优雅降级 渐进增强(百度查资料)—主要和设备兼容挂钩

2.媒体查询 两种书写方法:

a.style标签内书写
<style>
@media 媒体 and/or (属性:属性值) and/or (属性:属性值) {

}
@media all and (min-width: 300px) {

}
</style>
b.外部引入,有条件的加载样式表
<head>
<link rel="stylesheet" href="XXX.ccc" media="设备 条件 (属性:属性值)">
<link rel="stylesheet" href="XXX.css" media="screen and (max-width: 640px)">
</head>
c.常见媒体特性/属性:
width/min-width/max-width 布局视口的宽度
height/min-height/max-height 布局视口的高度
device-width device-height
设备屏幕的宽度/高度
orientation 设备方向
aspect-radio/min-aspect-radio/max-aspect-radio 视口宽度比
device-aspect-radio 屏幕的宽高比 例子如下:
<style>
.wrap {background: #000}
@media screen and (min-device-aspect-radio: 9 / 16) {
.wrap {
background: #39f;
}

}
</style>
    跨平台 - 跨系统 - 跨分辨率
跨系统 Native App、WEB APP、 Hybird APP
跨分辨率 - 响应式布局(网页)

十三、移动端框架详解

1.click事件延迟

a.移动端上设备中使用click事件和在PC端有所不同,大多数基于触摸的浏览器设备,在点击的时候会有300ms的事件触发等待时间。
原因在于点击后面还有个双击缩放的操作,这个涉及到触摸设备的手势交互行为原生设计。
设备需要通过事件判断是单机还是双击操作。

2.hover效果

移动端hover效果也会失效

3.touch触摸事件

a.touchstart
当手指触摸屏幕时触发
b.touchmove
当手指在屏幕上滑动时连续触发
c.touchend
当手指从屏幕移开时触发

4.触摸属性

a.touches
当前位于屏幕上的所有手指列表
b.targetTouches
位于当前DOM元素上的手指列表
c.changedTouches
涉及当前事件手指的列表

5.常用触控信息

a.identifier
唯一标识触摸回话,是一个整数(绘图应用等会涉及到)
b.target
事件目标对象
c.clientX/clientY/pageX/pageY/screenX/screenY
clientX/clientY:触摸点相对于浏览器视口左上角的位置
pageX/pageY:触摸点相对于页面左上角的位置
screenX/screenY:触摸点相对于屏幕左上角的位置
总结:page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准

6.zepto

a.专为mobile webkit浏览器开发的JavaScript框架,但同时兼容FF、Opera,不兼容所有的IE;
b.zepto与jQuery的关系
1)语法:Zepto语法大部分与jQuery一样
2)性能:Zepto在移动端中性能比较优越
3)应用:京东、当当网、小米官网等都使用了Zepto
c.Zepto下载
1)官网下载的Zepto默认包含zepto、event、ajax、form、ie,其他模块需要自己引入
2)github下载的zepto没有默认包含、根据需求自己引入
d.选择器支持
1)支持基本选择器
2)支持伪类选择器:需要映入selector.js