Mobile web
2016-01-16 15:12
239 查看
[align=left]原文链接：http://blog.csdn.net/small_rice_/article/details/22690535[/align]
[align=left]在智能手机横行的时代，作为一个web前端，不会编写移动web界面，的确是件悲催的事情。当公司准备做一个微信的微网站时，作为一个多年经验的web前端码农，我迷茫了，真心不知道从何下手。[/align]
[align=left]接下来就是搜一堆教程，然后开始编写代码，三天后，我的第一个移动端web页面编写完成。[/align]
[align=left]回头想想，移动端的web页面代码编写远没有我想的那样复杂（可能是我做的这个项目比较简单的缘故）。但是就入门来说，其实是蛮简单的，我把他总结为一下几个方面：特殊的meta标签／百分百比布局宽度／rem设置字体大小／css3的使用。[/align]
[align=left]好吧，让我们开始吧，以下是移动web新手的浅见，老鸟请绕行，如有赐教不胜感激。[/align]
[align=left]1.特殊的meta标签；[/align]
[align=left]因为现在我们用的智能手机（iOS，Android）的浏览器都是基于webkit内核，这里有一些针对webkit的特殊meta标签，在开发移动端web是起到很重要的作用：[/align]
[align=left] [/align]
[align=left]<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>[/align]
[align=left] [/align]
[align=left]强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；[/align]
[align=left] [/align]
[align=left]<meta content="yes" name="apple-mobile-web-app-capable" />[/align]
[align=left]
复制代码[/align]
[align=left]iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；[/align]
[align=left] [/align]
[align=left]<meta content="black" name="apple-mobile-web-app-status-bar-style" />[/align]
[align=left]
复制代码[/align]
[align=left]iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；[/align]
<meta content="telephone=no" name="format-detection" />
复制代码
[align=left]告诉设备忽略将页面中的数字识别为电话号码。[/align]
<meta content="email=no" name="format-detection" />
复制代码
[align=left]Android中禁止自动识别页面中的邮件地址，iOS中不会自动识别邮件地址；[/align]
[align=left]（注：由于webkit的浏览器对于html5的支持比较好，所以我们在声明头部的时候最好用html5的声明方式。当然如果你习惯了html4，那我只能告诉你，还是先学学html5在接着看吧！）[/align]
[align=left]2.百分百布局；[/align]
[align=left]拿到设计师的640px（以iPhone4的比例做的设计稿）的设计稿后，我就严格的按照设计稿设置了各个模块的高度／字号。接下来悲催的事情发生了，写出来的页面在手机上显示的异常大。我傻了，这是嘛情况！后来咨询专业人士才了解到，虽然iphone4的分辨率是960x640px，但是其屏幕的像素密度比较高，它的实际大小应该是减半的。所以在写代码时一切的高度／字号都要是设计稿的1/2。接着说百分比布局：[/align]
[align=left]在做移动web页面时，我们要用百分比布局来实现自适应屏幕宽度。有pc端web页面开发经验的同学就会知道，元素的盒子模型（不清楚的同学可以去w3school上查查）。[/align]
[align=left]那我想要一个元素100%显示，又必须有一个固定的padding-left／padding-right，还有1px的边框，怎么办？[/align]
element{
width: 100%;
padding-left: 10px;
border: 1px solid blue;
}
复制代码
[align=left]这样编写代码必然导致出现横向滚动条，肿么办？要相信问题就是用来解决的。这时候伟大的css3为我们提供了box-sizing属性，对于这个属性的具体解释不做赘述（想深入了解的同学可以到w3school查看，要知道自己动手会更容易记忆）。让我们看看如何解决上面的问题：[/align]
element{
width: 100%;
padding-left: 10px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
border: 1px solid blue;
}
复制代码
[align=left]好的，问题被解决了！[/align]
[align=left]3. rem设置字体大小；[/align]
[align=left]在这里让我们花一些梳理一下css中的单位：px／em／rem（以下内容摘自0101后花园）[/align]
[align=left]px：就是css中最基本的长度单位了，用px做单位基本上没什么问题，可以做到让页面按套路精确的展现。但是，（听到但是的时候是不是突然有些不适，就像每次开发的同学喊我的时候，我的潜意识会告诉自己，坏了又出bug了！！）如果全篇用px布局会暗藏一个问题，就是当用户和Ctrl滚页面的时候（说白了就是ctrl+，ctrl-），你会发现页面结构产生了不可预知的错乱，因此有砖家倡导使用em替代px。[/align]
[align=left]em：em是相对单位，em相对的基准点就是浏览器的字体大小（浏览器默认字体为16px），所以1em默认等于16px。那么14px＝0.875em; 公式是14/16=0.875em。用em来写的话，就可以解决ctrl+，ctrl-时造成的页面错乱问题。[/align]
[align=left]可是，问题又来了，em准确的说是相对于父节点的字号来计算的，如果自身定义了字号那么就相对自身字号来计算，举例如下：[/align]
html { font-size: 100%; }
.box-0 {
height: 1em; /* 此时height等于16px */
}
.box-1 {
font-size: 0.625em; /* 此时基准字号以变更为16*0.625=10px */
height: 1em; /* 此时实际height等于10px */
}
复制代码
[align=left]看明白了吧，1em并不是一个固定不变的值，再加上数学是体育老师教的，这不是自作孽吗。没关系，css3为我们引入一个新的单位就是rem可以解决这个问题。[/align]
[align=left]rem：rem和em一样也是一个相对单位，为了方便理解，我们就理解rem为root em，顾名思义rem只相对跟节点<html>计算，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同em，默认1rem=16px; 同理你可以设定html { font-size:62.5% } 那么1rem就等于10px，以此类推 …（当然万恶的ie678不支持rem，但是还好我们在做的是移动端web页面）[/align]
[align=left]4.使用css3；[/align]
[align=left]做这种高大上的移动web页面怎么能少的了css3。不过平时css3用的比较少，这里记下几个我在这个项目中用到的css3属性。更深入的亲们自己去学咯。同样，这里不对属性做赘述，放着强大的w3school不用，我只能对你说：药不能停啊！：[/align]
[align=left]A.圆角（这个太常用了）[/align]
element{
border: 1px solid blue;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
复制代码
[align=left]B.渐变（这个在做按钮的时候很常用）[/align]
element{
background-image: -moz-linear-gradient(top, #2288cc, #389de2); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #389de2), color-stop(1, #2288cc)); /* Saf4+, Chrome */
}
复制代码
[align=left]C.去掉手持设备点击时出现的透明层 （一般会在头部做格式化）[/align]
a,button,input{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
}
复制代码
[align=left]在应用了此属性时，链接的active属性会实效，解决的方法是，在页面unload时运行document.addEventListener("touchstart", function(){}, true);使active状态可用。（注：在小米系统下，点击链接仍然会出现红色的边框，各位同学如有解决方法，请赐教，不胜感激。）[/align]
[align=left]D.改变盒子模型（上面已讲过）[/align]
element{
box-sizing:border-box;
-webkit-box-sizing:border-box;
}
[align=left]在智能手机横行的时代，作为一个web前端，不会编写移动web界面，的确是件悲催的事情。当公司准备做一个微信的微网站时，作为一个多年经验的web前端码农，我迷茫了，真心不知道从何下手。[/align]
[align=left]接下来就是搜一堆教程，然后开始编写代码，三天后，我的第一个移动端web页面编写完成。[/align]
[align=left]回头想想，移动端的web页面代码编写远没有我想的那样复杂（可能是我做的这个项目比较简单的缘故）。但是就入门来说，其实是蛮简单的，我把他总结为一下几个方面：特殊的meta标签／百分百比布局宽度／rem设置字体大小／css3的使用。[/align]
[align=left]好吧，让我们开始吧，以下是移动web新手的浅见，老鸟请绕行，如有赐教不胜感激。[/align]
[align=left]1.特殊的meta标签；[/align]
[align=left]因为现在我们用的智能手机（iOS，Android）的浏览器都是基于webkit内核，这里有一些针对webkit的特殊meta标签，在开发移动端web是起到很重要的作用：[/align]
[align=left] [/align]
[align=left]<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>[/align]
[align=left] [/align]
[align=left]强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；[/align]
[align=left] [/align]
[align=left]<meta content="yes" name="apple-mobile-web-app-capable" />[/align]
[align=left]
复制代码[/align]
[align=left]iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；[/align]
[align=left] [/align]
[align=left]<meta content="black" name="apple-mobile-web-app-status-bar-style" />[/align]
[align=left]
复制代码[/align]
[align=left]iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；[/align]
<meta content="telephone=no" name="format-detection" />
复制代码
[align=left]告诉设备忽略将页面中的数字识别为电话号码。[/align]
<meta content="email=no" name="format-detection" />
复制代码
[align=left]Android中禁止自动识别页面中的邮件地址，iOS中不会自动识别邮件地址；[/align]
[align=left]（注：由于webkit的浏览器对于html5的支持比较好，所以我们在声明头部的时候最好用html5的声明方式。当然如果你习惯了html4，那我只能告诉你，还是先学学html5在接着看吧！）[/align]
[align=left]2.百分百布局；[/align]
[align=left]拿到设计师的640px（以iPhone4的比例做的设计稿）的设计稿后，我就严格的按照设计稿设置了各个模块的高度／字号。接下来悲催的事情发生了，写出来的页面在手机上显示的异常大。我傻了，这是嘛情况！后来咨询专业人士才了解到，虽然iphone4的分辨率是960x640px，但是其屏幕的像素密度比较高，它的实际大小应该是减半的。所以在写代码时一切的高度／字号都要是设计稿的1/2。接着说百分比布局：[/align]
[align=left]在做移动web页面时，我们要用百分比布局来实现自适应屏幕宽度。有pc端web页面开发经验的同学就会知道，元素的盒子模型（不清楚的同学可以去w3school上查查）。[/align]
[align=left]那我想要一个元素100%显示，又必须有一个固定的padding-left／padding-right，还有1px的边框，怎么办？[/align]
element{
width: 100%;
padding-left: 10px;
border: 1px solid blue;
}
复制代码
[align=left]这样编写代码必然导致出现横向滚动条，肿么办？要相信问题就是用来解决的。这时候伟大的css3为我们提供了box-sizing属性，对于这个属性的具体解释不做赘述（想深入了解的同学可以到w3school查看，要知道自己动手会更容易记忆）。让我们看看如何解决上面的问题：[/align]
element{
width: 100%;
padding-left: 10px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
border: 1px solid blue;
}
复制代码
[align=left]好的，问题被解决了！[/align]
[align=left]3. rem设置字体大小；[/align]
[align=left]在这里让我们花一些梳理一下css中的单位：px／em／rem（以下内容摘自0101后花园）[/align]
[align=left]px：就是css中最基本的长度单位了，用px做单位基本上没什么问题，可以做到让页面按套路精确的展现。但是，（听到但是的时候是不是突然有些不适，就像每次开发的同学喊我的时候，我的潜意识会告诉自己，坏了又出bug了！！）如果全篇用px布局会暗藏一个问题，就是当用户和Ctrl滚页面的时候（说白了就是ctrl+，ctrl-），你会发现页面结构产生了不可预知的错乱，因此有砖家倡导使用em替代px。[/align]
[align=left]em：em是相对单位，em相对的基准点就是浏览器的字体大小（浏览器默认字体为16px），所以1em默认等于16px。那么14px＝0.875em; 公式是14/16=0.875em。用em来写的话，就可以解决ctrl+，ctrl-时造成的页面错乱问题。[/align]
[align=left]可是，问题又来了，em准确的说是相对于父节点的字号来计算的，如果自身定义了字号那么就相对自身字号来计算，举例如下：[/align]
html { font-size: 100%; }
.box-0 {
height: 1em; /* 此时height等于16px */
}
.box-1 {
font-size: 0.625em; /* 此时基准字号以变更为16*0.625=10px */
height: 1em; /* 此时实际height等于10px */
}
复制代码
[align=left]看明白了吧，1em并不是一个固定不变的值，再加上数学是体育老师教的，这不是自作孽吗。没关系，css3为我们引入一个新的单位就是rem可以解决这个问题。[/align]
[align=left]rem：rem和em一样也是一个相对单位，为了方便理解，我们就理解rem为root em，顾名思义rem只相对跟节点<html>计算，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同em，默认1rem=16px; 同理你可以设定html { font-size:62.5% } 那么1rem就等于10px，以此类推 …（当然万恶的ie678不支持rem，但是还好我们在做的是移动端web页面）[/align]
[align=left]4.使用css3；[/align]
[align=left]做这种高大上的移动web页面怎么能少的了css3。不过平时css3用的比较少，这里记下几个我在这个项目中用到的css3属性。更深入的亲们自己去学咯。同样，这里不对属性做赘述，放着强大的w3school不用，我只能对你说：药不能停啊！：[/align]
[align=left]A.圆角（这个太常用了）[/align]
element{
border: 1px solid blue;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
复制代码
[align=left]B.渐变（这个在做按钮的时候很常用）[/align]
element{
background-image: -moz-linear-gradient(top, #2288cc, #389de2); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #389de2), color-stop(1, #2288cc)); /* Saf4+, Chrome */
}
复制代码
[align=left]C.去掉手持设备点击时出现的透明层 （一般会在头部做格式化）[/align]
a,button,input{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
}
复制代码
[align=left]在应用了此属性时，链接的active属性会实效，解决的方法是，在页面unload时运行document.addEventListener("touchstart", function(){}, true);使active状态可用。（注：在小米系统下，点击链接仍然会出现红色的边框，各位同学如有解决方法，请赐教，不胜感激。）[/align]
[align=left]D.改变盒子模型（上面已讲过）[/align]
element{
box-sizing:border-box;
-webkit-box-sizing:border-box;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- iOS开发技巧--去除项目中单个类型的警告
- 常用excel技巧
- debug.h 打印颜色
- 《机器学习》读书笔记，第一章引言
- Fragment的静态创建、动态创建
- Effective C++（条款41-44）
- 2_Selenium对象识别
- 内存分析：栈与堆的区别
- JavaScript：直接写入 HTML 输出流
- android studio的里的 content_XXX_xml问题
- 在脚本中, 使用sqlite3检查android程序生成的数据库是否OK
- Sqlite大数据量查询优化比较-转
- 第2章第2节练习题3 使用队列模拟渡口管理
- Mac OSX 无法SSH远程的原因
- 获取视频首张缩略图全部详细代码
- SQLite快速入门
- JavaScript 简介
- 转载一篇MySQL读取缓存的文章
- sqlite数据库中的sql语句大全
- 路由表详解