移动端开发的笔记1

来源：互联网发布：win7优化内存占用编辑：程序博客网时间：2024/06/05 04:25

最近正好的在做wap端的手机页面的，正好整理自己的笔记的
1.wap端的基本html5初始化的布局

<!DOCTYPE html>    <html>        <head>            <meta charset="UTF-8">            <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />            <meta name="apple-mobile-web-app-capable" content="yes" />            <meta name="apple-mobile-web-app-status-bar-style" content="black" />            <meta name="format-detection"content="telephone=no, email=no" />            <title>demo</title>        </head>        <body>            内容区        </body>    </html>

2.meta标签的使用：

``` 移动端前端制作有些地方不同于互联网，这篇主要讨论的是meta标签。meta标签位于之间。是主要辅助HTML结构层的。meta标签不管在互联网前端还是在移动端都起了很重要的作用。这里只讨论移动端。 这是一个HTML5为语言标准的说明文档。第一组meta标签，大家比较常见。这个是经常用到的。它表明的意思是它的内容是html文档，且网页编码采用的是utf-8编码。utf-8编码主要针对是简体中文和英文。正确的编码定义很有必要。否则会导致网页上的文字变成乱码```<div class="se-preview-section-delimiter"></div>

可以看看上面的代码的片段：

第二组meta标签就是移动端特属的标签了。它表明的意思是它是一个视图窗口。其视图窗口内容的宽度等于移动端设备的默认宽度。inital-scale表示的初始的缩放比例.一般设置为1.0倍。maximum-scale=1.0表示的允许用户缩放的最大比例。user-scalable=no表示是否支持用户手动进行缩放。

第三组和第四组meta标签都是针对IOS系统的专属标签。第三组meta标签表示的意思是是否启动webapp功能。说通俗一点。就是当点击网页添加至主屏幕功能时，会在主屏幕上生成一个图标。点击该图标会进入webapp功能。就是模拟本地应用的模式来浏览web页面。生成的图标可以自定义，启动webapp时的开始时的图片也可以定义。这个是link标签的作用，我会在介绍link标签时，单独进行说明。

3.移动端的字体的：

大家都知道每个浏览器都有的默认的字体，当然每个移动的设备也是有默认的字体的，安卓和ios ，winphone 都是有自己的默认的字体，可是这3移动设备都没有微软雅黑的字体，所以在设置的我们通常是这么写：

@font-face {font-family: ‘MicrosoftYaHei';src: url(‘MicrosoftYaHei.eot’); /* IE9 Compat Modes */src: url(‘MicrosoftYaHei.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */url(‘MicrosoftYaHei.woff’) format(‘woff’), /* Modern Browsers */url(‘MicrosoftYaHei.ttf’) format(‘truetype’), /* Safari, Android, iOS */url(‘MicrosoftYaHei.svg#MicrosoftYaHei’) format(‘svg’); /* Legacy iOS */}

让客户自己下载的微软雅黑的字体的，体验是太差，还有的流量太耗的
ios 系统

默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
无微软雅黑字体
android 系统

默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans
无微软雅黑字体
winphone 系统

默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe
无微软雅黑字体
结论

各个手机系统有自己的默认字体，且都不支持微软雅黑
如无特殊需求，手机端无需定义中文字体，使用系统默认
英文字体和数字字体可使用 Helvetica ，三种系统都支持
/* 移动端定义字体的代码 */body{font-family:Helvetica;}

还有一点很重点的移动端是字体是用px还是是em？

我的个人习惯是用px的，因为我的em换算不是太好的，

EM作为相对单位，是基于父级单位来计算，换算起来有点麻烦
PX是绝对单位，但是，严格来说PX也是相对的单位，因为屏幕分辨率的不同，PX的大小也是不同
其实现在还有一种的“rem”的

REM:Equal to the computed value of ‘font-size’ on the root element.
IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了，我可以放肆的使用 rem
换算简单，
T1VhurXvNXXXb9uvne-700-270

假设：

默认的 html font-size=16px，那么我想设置12px 的文字就是：12÷16=0.75（rem）

html{
font-size:62.5%; /* 10/16=62.5% */
}

body{
font-size:12px;
font-size:1.2rem ; /* 12/10=1.2 */
}

p{
font-size:14px;
font-size:1.4rem;
}

如果还是不会就用： CSS 预处理工具（Sass、LESS 、Stylus等）自动计算 rem 值，

可以看看上面的代码的片段：> 第二组meta标签就是移动端特属的标签了。它表明的意思是它是一个视图窗口。其视图窗口内容的宽度等于移动端设备的默认宽度。inital-scale表示的初始的缩放比例.一般设置为1.0倍。maximum-scale=1.0表示的允许用户缩放的最大比例。user-scalable=no表示是否支持用户手动进行缩放。> > > >  > 第三组和第四组meta标签都是针对IOS系统的专属标签。第三组meta标签表示的意思是是否启动webapp功能。说通俗一点。就是当点击网页添加至主屏幕功能时，会在主屏幕上生成一个图标。点击该图标会进入webapp功能。就是模拟本地应用的模式来浏览web页面。生成的图标可以自定义，启动webapp时的开始时的图片也可以定义。这个是link标签的作用，我会在介绍link标签时，单独进行说明。> 3.移动端的字体的：大家都知道每个浏览器都有的默认的字体，当然每个移动的设备也是有默认的字体的，安卓和ios ，winphone 都是有自己的默认的字体，可是这3移动设备都没有微软雅黑的字体，所以在设置的我们通常是这么写：

@font-face {
font-family: ‘MicrosoftYaHei’;
src: url(‘MicrosoftYaHei.eot’); /* IE9 Compat Modes */
src: url(‘MicrosoftYaHei.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘MicrosoftYaHei.woff’) format(‘woff’), /* Modern Browsers */
url(‘MicrosoftYaHei.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘MicrosoftYaHei.svg#MicrosoftYaHei’) format(‘svg’); /* Legacy iOS */
}
“`

让客户自己下载的微软雅黑的字体的，体验是太差，还有的流量太耗的
**ios 系统
默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
无微软雅黑字体
android 系统
默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans
无微软雅黑字体
winphone 系统
默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe
无微软雅黑字体**
结论

还有一点很重点的移动端是字体是用px还是是em？

我的个人习惯是用px的，因为我的em换算不是太好的，

假设：

默认的 html font-size=16px，那么我想设置12px 的文字就是：12÷16=0.75（rem）

**html{
font-size:62.5%; /* 10/16=62.5% */
}
body{
font-size:12px;
font-size:1.2rem ; /* 12/10=1.2 */
}
p{
font-size:14px;
font-size:1.4rem;
}**

如果还是不会就用： CSS 预处理工具（Sass、LESS 、Stylus等）自动计算 rem 值，

0 0