移动端开发需要注意的一些事情
不知不觉,做移动端开发也有半年的时间了。从刚开始接触移动端开发,到现在的细节完善。期间也走了很多坑!为什么会走这么多坑呢?可能身边做前端开发的朋友比较少,想找个人一起研究技术的都没。也加过一些前端群,大多数些扯淡聊天的群。没办法,只得自己去苦逼的研究!下面一起来分享下,我做移动端开发半年来的一些经验,以及需要注意的一些东西吧!一、关于单位的使用相信只要做过移动端开发的人,或者刚入门的新手朋友们,最纠结的问题是在于“字体”单位的选择!为什么会这样说呢?可能在传统的PC端来说,1px=1px的比例。而在移动端却不是这样,1px = ?。 因为出现了一个像素密度这样个东西,就不能在移动端使用“PX”这个单位。可能在你的大屏手机是1px等于1点几个像素,可能在小屏手机却刚好。就好比网页的兼容性一样,浏览器的内核不同,解析当然会有所不同!正好,CSS3又给你出现了一个新的单位“rem”。如果有对rem还有不怎么了解的朋友,可以看看这篇文章。当然出现了这样的问题,首先我们就会去问问神奇的“百度”。不是网上流传这样一个段子么:“有事找度娘,无事上度娘!”,好吧,我又邪恶了!回归正题,大多数网友给出的答案是:“给html根元素的字体大小设置font-size:62.5%,再来使用rem这个单位就能很好的解决这个问题!”这样设置后:就会得到一个兑换比例值:1rem = 10 如果我们要给一个&h1&标签设置字体大小为20px的时候。我们就直接设置为rem就好了!代码如下:&&&&html{font-size:62.5%;}
&&&&h1{fon-size:2rem}&==&h1{fon-size:20px}& & & & & &二、布局上& 相信布局不用我多说什么了,就按照正常的网页布局来写,一般设计师给的效果图是640*960.我们就按照320的比例来做,就是宽度减少一半。可能多数人跟我之前是一样,字体用单位“rem”。其它照样使用px这个单位。好吧!最近又被严格的UI设计师,找出问题来了,你怎么这里跟我效果图对不上呀!....好吧!原来想偷工减料的就这样写的,没办法,既然被严格的查起来了,又得去找解决方案!(可能之前也没太在意这些细节,一直就这样拖着)暂时找了个合适的解决方案,这样既解决了字体单位的问题,又兼容单位像素的问题!,只是换算麻烦点!比如:我们要设置一个宽度为60px的盒子.换算成rem单位就是:60/2/20 = 1.5 前提是我们需要在头部添加以下代码:PS:效果图实际像素为60px,在手机端就是30px,在转化成rem单位就在除以20。html&{
&&&&&&&font-size&:&20
&&&@media&only&screen&and&(min-width:&401px){
&&&&&&&html&{
&&&&&&&&&&&font-size:&25px&!
&&&@media&only&screen&and&(min-width:&428px){
&&&&&&&html&{
&&&&&&&&&&&font-size:&26.75px&!
&&&@media&only&screen&and&(min-width:&481px){
&&&&&&&html&{
&&&&&&&&&&&font-size:&30px&!
&&&@media&only&screen&and&(min-width:&569px){
&&&&&&&html&{
&&&&&&&&&&&font-size:&35px&!
&&&@media&only&screen&and&(min-width:&641px){
&&&&&&&html&{
&&&&&&&&&&&font-size:&40px&!
&&&}&&&&可能还有更好的解决方案,暂时没找到更好的方案...& & & & & & & & & & & & 三、细节处理&&&&可能处理细节就是在解决兼容性的问题吧!还好手机端没有蹦出个IE来,基本都是webkit内核和IOS自带的浏览器。1、禁止自动识别电话和android自动识别邮箱&&&&&meta&content=&telephone=no&&name=&format-detection&&/&
&&&&&meta&content=&email=no&&name=&format-detection&&/&&2、使用无衬线字体&&&&body&{
&&&&&&&font-family:&&Helvetica&Neue&,&Helvetica,&STHeiTi,&sans-
&&&&}iOS 4.0+ 使用英文字体 Helvetica Neue,之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。需补充说明,华文黑体并不存在iOS的字体库中,但系统会自动将华文黑体 STHeiTi 兼容命中系统默认中文字体黑体-简或黑体-繁&&&&Heiti&SC&Light&黑体-简&细体&(iOS&7后废弃)
&&&&Heiti&SC&Medium&黑体-简&中黑
&&&&Heiti&TC&Light&黑体-繁&细体
&&&&Heiti&TC&Medium&黑体-繁&中黑原生Android下中文字体与英文字体都选择默认的无衬线字体4.0 之前版本英文字体原生 Android 使用的是 Droid Sans,中文字体原生 Android 会命中 Droid Sans Fallback4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体其他第三方 Android 系统也一致选择默认的无衬线字体3、禁止选择文本&&&&html,&body&{
&&&&&&&-webkit-user-select:&&&&/*&禁止选中文本(如无文本选中需求,此为必选项)&*/
&&&&&&&user-select:&
&&&&}4、禁止长按链接与图片弹出菜单&&&&a,&img&{
&&&&&&&-webkit-touch-callout:&&/*&禁止长按链接与图片弹出菜单&*/
&&&&}5、去除A连接input标签,点击出现自带的阴影样式&&&&a,input{
&&&&-webkit-tap-highlight-color:rgba(0,0,0,0);/*ios&android去除自带阴影的样式*/
&&&&}6、屏蔽阴影:&&&&-webkit-appearance:&&&&可以同时屏蔽输入框怪异的内阴影,解决iOS下无法修改按钮样式,测试还发现一个小问题就是,加了上面的属性后,iOS下默认还是带有圆角的,不过可以使用 border-radius属性修改。7、单击延迟click 事件因为要等待双击确认,会有 300ms 的延迟,体验并不是很好。开发者大多数会使用封装的 tap 事件来代替click 事件,所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。8、手机拍照和上传图片&&&&&input&type=”file”&的accept&属性
&&&&&!--&选择照片&--&
&&&&&input&type=file&accept=&image/*&&
&&&&&!--&选择视频&--&
&&&&&input&type=file&accept=&video/*&&html5模板代码&!DOCTYPE&HTML&
&&&&&!--申明当前页面的编码集--&
&&&&&meta&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&
&&&&&!--网页标题--&
&&&&&title&HTML5移动端开发模板&/title&
&&&&&!--网页关键词--&
&&&&&meta&name=&keywords&&content=&&&/&
&&&&&!--网页描述--&
&&&&&meta&name=&description&&content=&&&/&
&&&&&!--适配当前屏幕--&
&&&&&meta&name=&viewport&&content=&width=device-width,&initial-scale=1.0,&maximum-scale=1.0,&user-scalable=0&&/&
&&&&&!--禁止自动识别电话号码--&
&&&&&meta&name=&format-detection&&content=&telephone=no&&/&
&&&&&!--禁止自动识别邮箱--&
&&&&&meta&content=&email=no&&name=&format-detection&&/&
&&&&&!--iphone中safari私有meta标签,
&&&&&&&&允许全屏模式浏览,隐藏浏览器导航栏--&
&&&&&meta&name=&apple-mobile-web-app-capable&&content=&yes&&/&
&&&&&!--iphone中safari顶端的状态条的样式black(黑色)--&
&&&&&meta&name=&apple-mobile-web-app-status-bar-style&&content=&black&&
&&&&&style&type=&text/css&&
&&&&/*reset&重置*/
&&&&body,ul,ol,p,h1,h2,h3,h4,h5,dl,dd,form,input,textarea,
&&&&td,th,button,strong,em,select,video,canvas{margin:0;padding:0;}
&&&&li{list-style:vertical-align:}
&&&&table{&border-collapse:}
&&&&textarea{resize:overflow:}
&&&&img{&border:&vertical-align:}
&&&&em{&font-style:}
&&&&a{&text-decoration:}
&&&&a,input{
&&&&-webkit-appearance:&/*屏蔽阴影*/
&&&&-webkit-tap-highlight-color:rgba(0,0,0,0);
&&&&/*ios&android去除自带阴影的样式*/
&&&&a,&img&{
&&&&/*&禁止长按链接与图片弹出菜单&*/
&&&&-webkit-touch-callout:&&
&&&&html,&body&{
&&&&/*&禁止选中文本(如无文本选中需求,此为必选项)&*/
&&&&-webkit-user-select:&&&
&&&&user-select:&
&&&&/*public*/
&&&&html&{
&&&&font-size&:&20
&&&&@media&only&screen&and&(min-width:&401px){
&&&&html&{
&&&&font-size:&25px&!
&&&&@media&only&screen&and&(min-width:&428px){
&&&&html&{
&&&&font-size:&26.75px&!
&&&&@media&only&screen&and&(min-width:&481px){
&&&&html&{
&&&&font-size:&30px&!&
&&&&@media&only&screen&and&(min-width:&569px){
&&&&html&{
&&&&font-size:&35px&!&
&&&&@media&only&screen&and&(min-width:&641px){
&&&&html&{
&&&&font-size:&40px&!&
&&&&body{font-family:&&Helvetica&Neue&,&Helvetica,&&STHeiTi&,&sans-&
&&&&overflow-x:&overflow-y:&font-size:0.7
&&&&.clear{zoom:1;}
&&&&.clear:after{content:'';&display:&clear:}
&&&&.fl{float:}
&&&&.fr{float:}
&&&&.viewport{&max-width:640&margin:0&&overflow-x:}
&&&&&/style&
&&&&&&&&&div&这是一个移动端开发模板哟!&/div&
&&&&&/div&
&/html&&&&&再次觉得一个人苦逼的研究太累了,没有方向,可能会浪费大量的时间在做研究和测试上,但是也有一些乐趣在里面!对于学习和成长不失为一个很好的办法。&&&&同时也感谢昨天“辉”这位朋友,对于我博客文章的打赏。这应该是建博客以来:第二位朋友对于我博客文章的打赏了,从最初的建博客开始,我一天也没想到自己写的文章会得到相对应的回报!这可能就是“非以其无私邪,故能成其私”的道理吧!写在最后:之前很多朋友都在问我:做网站怎么去盈利(赚钱),我告诉他们:要有一个“利他”之心。无私的帮他他人,不求回报,钱这个东西都是顺带的!这就是“道”需要去时间和经历去感悟。---以上纯属“段亮”个人见解,不喜勿喷!如有不足之处,欢迎指出。共勉!!本文由段亮博客原创出品，如需转载请注明出处。本文出处：
如果您觉得文章对你有帮助，可以进行打赏。
打赏多少，您高兴就行，谢谢您对段亮这小子的支持！ ~(@^_^@)~
微信扫一扫
支付宝扫一扫
把此文章分享给其它人..
或许你还喜欢以下内容:
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
百度编辑器自带的
学长 你这个显示代码的东东，你用的是那个插件哟？
移动端越来越火了
你也想建立一个独立博客？（)分享过一篇： ，但是我们在制作手机网站的过程中，除了自适应屏幕，会发现有的内容不要在手机上出现，或者自适应后也无法满足我们的美观等方面的要求，这个时候该怎么办呢？
如何让PC网站自适应手机屏幕并且做手机网站某些内容不显示？
我们可以利用CSS3的Media Query来实现。本文主要介绍了移动开发和CSS3结合，来进行多种分辨率适配的例子。
文中提到的响应式网页设计（Responsive web design）是一种现代网页设计方法，基于CSS3的媒介查询（Media Query）特性使得网页适应不同设备，即根据设备的分辨率和缩放自动重新布局。
———–
响应式网页设计现在无疑是一件大事情。对新手来说，响应式设计可能有一点复杂，但是事实上比你想象的简单。为了帮助你迅速的了解响应式设计，我起草了一篇快速教程。你可以在3个步骤中学习到响应式设计和媒介查询（Media Queries）的基本原理（假定你了解基本的CSS知识）。
第一步：Meta标签
大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在&head&标签里加入这个meta标签。
name=“viewport” content=“width=device-width, initial-scale=1.0”
IE8或者更早的浏览器并不支持Media Query。你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。
&!–[if lt IE 9]
src=“http://css3-mediaqueries-/svn/trunk/css3-mediaqueries.js”
&![endif]–
第二步：HTML结构
在这个例子里，我有一个包括头部、内容、侧边栏和页脚的基本页面布局。头部有固定的高度180像素，内容容器是600像素而侧边栏是300像素。
第三步：媒介查询-Media Queries
CSS3 Media Query-媒介查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。
当视图宽度为小于等于980像素时，如下规则将会生效。基本上，我会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。
然后为小于等于700像素的视图指定#content和#sidebar的宽度为自适应并且清除浮动，使得这些容器按全宽度显示。
对于小于等于480像素（手机屏幕）的情况，将#header元素的高度设置为自适应，将h1的字体大小修改为24像素并隐藏侧边栏。
你可以根据你的喜好添加足够多的媒介查询。我在示例中仅仅展示了3个媒介查询。媒介查询的目的在于为指定的视图宽度指定不同的CSS规则，来实现不同的布局。媒介查询可以写在同一个或者单独的样式表中。您现在可以用手机访问 来试试效果。
本帖二维码，扫码收藏，或分享：移动端问题解决方案_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
移动端问题解决方案
上传于||文档简介
&&前​端​移​动​端​问​题​解​决​方​案
你可能喜欢说实话，我们这次开发移动端的项目，整个项目组的人都是第一次，最初立项的时候为是选择native app和web app还争论了一番，最后综合考虑，我们选择了web（我们选择了h5）开发。但从这两种开发模式的特点来说，从它们诞生之日起就开始了不断的争论，孰好孰坏，本文不作探讨，只是简单罗列下本人开发遇到的问题和最终的解决方案。1. 说到这个，移动开发面对的屏幕尺寸那叫一个丰富，其中安卓阵营就够让人头痛的。我们在PC端常用的两种布局方式就是固定布局和弹性布局，前者设置一个绝大多数电脑能正常显示的固定宽度居中显示，后者则采用百分比。关于这两者讨论的文章很多，有兴趣的自己查阅下，我今天要介绍的就是相信你已经听过的”响应式布局”，响应式布局意味着媒体查询，这个在css2就已经出现的东西随着html5、css3的到来又增添了新的生机。响应式web设计并非新的技术，只不过将已有的开发技巧（弹性布局、弹性图片和媒体查询等）整合在了一起，并命了这个听起来很牛X的名字——响应式web设计。犹如当年的Ajax一样，将已有的技术重新组合发挥新的作用。（1）.媒体查询初探。媒体查询并非新出现的技术，如下：其中就使用了媒体查询，通过 标签的media属性为样式表指定了设备类型，当然CSS3时代的媒体查询更加丰富。发现了他们的区别吗？对，不只是针对设备进行适配，而且加了一个条件，就是当设备纵向放置的时候才匹配，咱们再看一个。大家会发现我们又拓展了一个条件，对，就是当设备屏幕的宽度大于960px才会加载style.css样式文件。我们究竟有哪些特性是可以被探测到的呢？下面列了一部分供大家参考（参考自http://www.w3.org/html/ig/zh/wiki/CSS3媒体查询）：- width 视口宽度- height 视口高度- device-width 设备屏幕的宽度- device-height 设备屏幕的高度- orientation 检测屏幕处于横屏还是竖屏- aspect-ratio 基于视口的宽高比例- device-aspect-ratio 基于设备屏幕的宽高比- color 颜色的位数，如min-color：32 匹配设备是否有32位或以上的颜色- color-index 设备的颜色索引表中的颜色数- monochrome 检测单色振缓冲区中每像素使用的位数。为非负数，如monochrome：3- resolution 检测屏幕或打印机的分辨率，如min-resolution：300dpi(dpi后面会介绍)，也可以是每厘米像素点的度量值，如min-resolution：120dpcm- scan 扫描方式，值为progressive（逐行扫描）、interlace（隔行扫描）- grid 检测输出设备是网格设备还是位图设备创建媒体查询时，上述特性（scan和grid不行）都可以加上min和max前缀创建媒体查询的范围。除了link标签能够进行媒体查询，是不是还有其它的呢，答案是Yes 。html中的meta标签，此前我们常用的应该是这个但是现在我们要说的不是这个，而是这个：在多数ios和android设备的浏览器都支持viewport meta元素覆盖默认的画布缩放设置。在标签中插入meta标签，设置相应属性即可，如上代码，name=”viewport” content中width=device-width表示浏览器页面宽度等于设备宽度（同理可以设置高度，也可指定具体值），initial-scale=1表示页面不缩放保持，mininum-scale=1和maximum-scale=1表示允许用户最小缩小至原大小和扩大到原大小（实际就是不让缩放^^），user-scaleable=no 表示禁止缩放, target- densitydpi = high-dpi表示适配高分辨率的屏幕，还可以取值为dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi，后面的四个定性，第一个定量，即dpi_value是DPI值，device-dpi是使用设备原本的 dpi 作为目标 dp，不发生默认缩放，而后面的三个是指dpi取值在一定范围的表示。这里我们先介绍前文出现过的一个名词dpi，所表示的是每英寸所拥有的像素（pixel）数目，数值越高，即代表显示屏能够以越高的密度显示图像。当达到人眼的极限分辨率时，乔帮主给它取了一个很高端的名字——Retina。那么目前市面的手机分辨率是怎样的一个分布呢，ios大家都知道的，从iphone4时代开始就已经是Retina屏了，至于Android可以看下此前Google官方公布的数据：从上面可以看出，高分屏和超分屏已经是主流了，具体的适配范围还是看各自的项目和定位吧。讲了这么多，有人可能会疑惑为什么这些都不是用在CSS中的？别急，慢慢来，现在就介绍如何在样式中运用，按照上述屏幕分辨率的四种划分，我们可以看到基本可以舍弃ldpi了。/* 中分辨率屏幕 *//*高分辨率屏幕*//*超高分辨率屏幕（传说中的Retina屏）*/上面就是在css中的用法，把我们需要的css代码包含在大括号中就能用了，是不是很方便的样子%&_&%。当然我们还可以用到之前提供的几个特性，如下：针对视口宽度不大于768像素的情况加载大括号中的样式。虽然我们可以把设备的分辨率可以分为这几类，但是屏幕的尺寸实在太多，如果针对每一种尺寸写一种样式，我觉得设计师和前端面不用干别的了，因为开发成本实在太大，而且没有必要，我们只需要针对绝大多数的设备结合媒体查询和弹性布局来调整，减少开发成本。2.CSS3新增属性现在移动端两大阵营ios和android都是基于webkit内核的，而webkit内核对CSS3的支持走在了前面，在这里我们可以抛开翔一样的ie家族，尽情享受多彩绚丽CSS3世界吧！CSS3给我们带来了如：文字阴影（text-shadow）、盒子阴影（box-shadow）、圆角（border-radius）、背景渐变（background: linear-gradient(#000, #fff)）、2D变换（transition）、动画（animation）等大家耳熟能详的常用属性外，还有如-webkit-mask、-webkit-text-stroke、-webkit-nbsp-mode、-webkit-tap-highlight-color、-webkit-box-reflect、-webkit-marquee、-webkit-box等webkit内核私有属性，至于这些属性其他浏览器支持程度，有兴趣的可以自己研究研究，这上面的每一个属性都有自己的使用场景，就看如何灵活运用。今天我不全部列出，仅简单介绍几个。（1）、介绍的第一个就是display：-webkit-box，我们知道元素大致分为内联元素、块状元素和介于两者之间的元素，当然还有inline-table、table-cell等神马的，那么display: -webkit-box怎么用呢，什么举个应用场景，对于下图所示的情况，父元素被1、2、3均分，且2和1之间间隔10px，你会怎么做？这时候我们可以试试新的display:-webkit-box，另外还有如下属性配合使用，-webkit-box-orient子元素排列方向 horizontal | vertical | inline-axis | block-axis | inherit，其中默认值是inline-axis，即横向排列-webkit-box-flex 子元素之间比例，仅作一个系数-webkit-box-direction 子元素排列顺序 normal | reverse | inherit，其中默认值是normal-webkit-box-flex-group 以组为单位的流体系数-webkit-box-ordinal-group 以组为单位的子元素排列方向-webkit-box-lines 子元素是否换行，类似word-wrap和word-break的作用-webkit-box-align 子元素垂直方向的对其方式-webkit-box-pack 子元素水平方向的对其方式这些配合使用的属性我们全部默认即可CSS：HTML：怎么理解上面的代码呢，父亲有一块地，要分给兄弟几个，除去老大和老二之间的分割线所占的那块，剩下的部分均分的分数由li的兄弟个数和box-flex的总数确定，现在一共三兄弟，每兄弟的box-flex都是1，所以就总分数=1*1+1*1+1*1=3。如果代码稍作修改那么现在老二的box-flex是2了，总分数就是1*1+1*2+1*1=4，其中老大老三各占一份，老二占两份，显示效果如下：（2）、-webkit-text-size-adjust:我做项目的时候发现一个问题，就是当竖屏的屏的时候显示效果不错，但是当横屏的时候，字体会变大，无论你怎么设置字体大小都无效，后来才知道是text-size-adjust（https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust）在作怪。浏览器默认会根据当前屏幕和内容作调整，在webkit内核的浏览器中只需要-webkit-text-size-adjust:none就禁止自动调整，至于是否全局活局部使用看自己的项目需求。如上图所示，很明显当手机由竖屏转向横屏的时候主题区域的文字自动变大，跟你自己设置的大小无关，当你设置了-webkit-text-size-adjust:none后横屏的效果是这样的这样，字体的大小就有我们自己设置，是可控的。（3）、字级单位。我们常用的有px、pt、百分比、em等，很惭愧，我最近才知道有rem，而且是个相当不错的朋友。前面的几个单位大家都比较熟悉，不知道有没有和我一样小白的才知道rem的呢，我们就介绍一下这个新朋友，它是随着css3来到这个世界。我们之前用em、百分比的时候遇到的问题就是计算，而且当嵌套的层级太多时就会非常难以把控，而用px则被固定死了，现在我们用rem完全不用担心这个问题，因为rem的参照对象只有根节点。我们只需设置根节点的大小，所有子节点都只需参照它来设计就可以，下面是px、em、百分比和pt的对比根据上面的图表（红色部分为默认，当然不同的浏览器渲染默认值不一样，具体还需各位实测）可以看出，我们只需设置html根元素字体大小为75%，对应的px值就是12，这样我们可以很方便的设置页面的宽高和字体大小，当然单位是rem，这样参考对象才会永远是html而不是父元素，当需要变化的时候，只需改变html的大小其他的元素都会相应变化，方便极了。3、HTML5新增标签。在html5中新增量很多标签，加强连html标签的语义化，如等等，这些标签都各自有自己大意义，不再仅仅是span和div，虽然html4中也有很多语义化的标签，但是不如html5丰富。除了这些新增的标签，还有一些此前就有的标签，但是类别新增，最具代表性的就是表单form，而本文要介绍的就是form。以上除了type=text外，其他的都是新增的，如果浏览器支持这些属性的话，就会自动调用相应组件，如在移动设备中type=number/email/text时，浏览器会调用不同版面的键盘，这样加快用户的输入，体验也更美好，如下如果是type=range则会出现这样的组件，供选择范围如果是type=color则会出现颜色选择器如果是type=date则出现日期选择器如果是type=search,则在输入时候出现一个一键清除的按钮，点击输入的文字全部清除另外，除了input的type新增量类别，还增加一些很实用的属性，如placeholder，我们知道，input中我们常常会默认一些文案，当用户输入的时候会自动清除，html5之前我们是靠javascript实现的，但是有了html5，我们可以轻松实现，只需要placeholder=”默认文案” 如下当然新增的不只有placeholder，还有譬如可以关闭默认大小写的autocapitalize=”off”，有兴趣的童鞋可以研究研究。4、选择符选择符大致分为元素选择符、关系选择符、属性选择符、伪类选择符、伪对象选择符，在PC端，我们用的最多的就是元素选择符、关系选择符和属性选择符如div{……}、div.class{……}、div#id{……}、div span{……}、div[class=&classname&]{}但是由于ie某些浏览器的原因，很多好用的选择符不能广泛使用，如ie6只支持a标签的伪类选择符，但是在移动端，我们就不用在意这些了，绝大多数选择符都已经可以使用了，如前文已经用到的.item_list li:first-child{background: #f00}.item_list li:nth-child(2){margin-left: 10background: #ff0;-webkit-box-flex:1;}.item_list li:last-child{background: #c96}伪类选择符和伪对象选择符有很多，灵活运用可以减少很多不必要的代码。如E:nth-child(n){ …… }、E:nth-of-type(n){ …… }、E:disabled{ …… }、E:empty{ …… }、E:first-letter/E::first-letter{ …… }、E:first-line/E::first-line{ …… }、E:before/E::before{ ……}、E:after/E::after{…… }、E::selection{ …… }等，这里不细说。5、一些小的建议（1）、如何禁止用户旋转设备这里其实是想告诉你在浏览器里办不到，因为禁止开发者阻止浏览器的orientationchange事件。（2）、禁用自动识别电话号码在开发项目的时候，我们经常会用到一些数字或者就是电话号码，但是又不想系统自动识别让用户可以直接拨打，我们只需要在标签之间加入即可，但是有些特殊情况我们需要可以用户直接拨打，如没关系，像这样即可，系统会自动识别，用户点击即可选择拨号。（3）盒子边框溢出当我们指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。按照盒子模型，就会发现该元素的左右边框各1个像素会溢了，导致出现横向滚动条，这时候我们可以为其添加-webkit-box-sizing:border-box用来指定该盒子的大小包括边框的宽度。（4）、ios数字颜色样式超过9位后失控这个问题我不知道该怎么描述，就是在ios中，当数字超过9位数时，浏览器会给这个数字默认加上一个颜色，无论你设置什么颜色都无效。（5）、iOS可禁止用户在新窗口打开页面在项目开发中，有时我们需要某个链接在当前页面打开，这样需要禁止用户在新窗口打开页面，我们可以使用a标签的target=”_self”指定在当前页面打开，但是在iOS中长按链接一段时间后，系统会弹出一个对话框，用户可以通过点击”在新页面中打开”来在新窗口打开页面，这样我们指定的target属性就失效了，但是可以通过指定当前元素的-webkit-touch-callout属性为none来禁止iOS弹出这些按钮。（6）、CSS3绘图和CSS3动画在html5和css3的世界里，很多图片都是多余的，我们可以尽情发挥自己的想象，让CSS3替代不必要的图片不必要的JavaScript，另外做CSS3动画时最好将动画代码提取出来单独命名。
老白 18楼 写得很好，赞一个
Chinaz网友 17楼 大牛 学习了
Chinaz网友 17楼 好 很好 非常好
Chinaz网友 15楼 好 很好 非常好
Chinaz网友 16楼 好 很好 非常好
Chinaz网友 13楼 知识点虽然不是很多，但说的很全面，可以很快的把思路带进去
Chinaz网友 12楼 不错，到位
Chinaz网友 11楼 这么的不错，挺详细的
Chinaz网友 10楼 好 唉说到点
Chinaz网友 9楼
热门素材内容推荐
& CopyRight , , Inc.All Rights Reserved.