H5移动端知识点总结

最新推荐文章于 2024-10-13 00:03:41 发布

weixin_34038652

最新推荐文章于 2024-10-13 00:03:41 发布

阅读量92

点赞数

文章标签：移动开发前端 ViewUI

原文链接：https://juejin.im/post/5a0d07f26fb9a0451f307d0c

版权

移动开发基本知识点

使用

rem

作为单位

html { font-size: 100px; }
@media(min-width: 320px) { html { font-size: 100px; } }
@media(min-width: 360px) { html { font-size: 112.5px; } }
@media(min-width: 400px) { html { font-size: 125px; } }
@media(min-width: 640px) { html { font-size: 200px; } }

给手机设置

100px

的字体大小

;

对于

320px

的手机匹配是

100px

，其他手机都是等比例匹配

;

因此设计稿上是多少像素的话，那么转换为

rem

的时候，

rem =

设计稿的像素

/100

即可

;

二

禁用

a,button,input,optgroup,select,textarea

等标签背景变暗

在移动端使用

标签做按钮的时候或者文字连接的时候，点击按钮会出现一个

暗色的

背景，比如如下代码：

<a href="">button1</a>

<input type="button" value="

提交

"/>

在移动端点击后

会出现

暗色

的背景，这时候我们需要在

css

加入如下代码即可：

a,button,input,optgroup,select,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

三

. meta

基础知识点：

页面窗口自动调整到设备宽度，并禁止用户及缩放页面。

属性基本含义：

content="width=device-width

：

控制

viewport

的大小

,device-width

为设备的宽度

initial-scale -

初始的缩放比例

minimum-scale -

允许用户缩放到的最小比例

maximum-scale -

允许用户缩放到的最大比例

user-scalable -

用户是否可以手动缩放

忽略将页面中的数字识别为电话号码

忽略

Android

平台中对邮箱地址的识别

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对

ios

的

safari

将网站添加到主屏幕快速启动方式，仅针对

ios

的

safari

顶端状态条的样式

可选

default

、

black

、

black-translucent -->

需要在网站的根目录下存放

favicon

图标，防止

404

请求

(

使用

fiddler

可以监听到

)

，在页面上需加

link

如下：

因此页面上通用的模板如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>

标题

</title>

这里开始内容

</body>
</html>

四：移动端如何定义字体

font-family
body{font-family: "Helvetica Neue", Helvetica, sans-serif;}

想要学习前端开发的同学，可以加群：

543627393

学习哦！