推广 热搜: 进口  企业  未来  河南  大地  上海  曙光  朝鲜  其他  龙江 

前端移动端入门操作总结一

   日期:2019-01-03     浏览:650    评论:0    
核心提示:头想想,移动端的web页面代码编写远没有我想的那样复杂(可能是我做的这个项目比较简单的缘故)。但是就入门来说,其实是蛮简单
 头想想,移动端的web页面代码编写远没有我想的那样复杂(可能是我做的这个项目比较简单的缘故)。但是就入门来说,其实是蛮简单的,我把他总结为一下几个方面:特殊的meta标签/百分百比布局宽度/rem设置字体大小/css3的使用。
好吧,让我们开始吧,以下是移动web新手的浅见,老鸟请绕行,如有赐教不胜感激。  1.特殊的meta标签; 因为现在我们用的智能手机(iOS,Android)的浏览器都是基于webkit内核,这里有一些针对webkit的特殊meta标签,在开发移动端web是起到很重要的作用: <meta content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;” name=“viewport” />  强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览; <meta content=“yes” name=“apple-mobile-web-app-capable” />  iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览; <meta content=“black” name=“apple-mobile-web-app-status-bar-style” />  iphone的私有标签,它指定的iphone中safari顶端的状态条的样式; <meta content=“telephone=no” name=“format-detection” />  告诉设备忽略将页面中的数字识别为电话号码。 <meta content=“email=no” name=“format-detection” />  Android中禁止自动识别页面中的邮件地址,iOS中不会自动识别邮件地址;  (注:由于webkit的浏览器对于html5的支持比较好,所以我们在声明头部的时候最好用html5的声明方式。当然如果你习惯了html4,那我只能告诉你,还是先学学html5在接着看吧!)  2.百分百布局; 拿到设计师的640px(以iPhone4的比例做的设计稿)的设计稿后,我就严格的按照设计稿设置了各个模块的高度/字号。接下来悲催的事情发生了,写出来的页面在手机上显示的异常大。我傻了,这是嘛情况!后来咨询专业人士才了解到,虽然iphone4的分辨率是960x640px,但是其屏幕的像素密度比较高,它的实际大小应该是减半的。所以在写代码时一切的高度/字号都要是设计稿的1/2。接着说百分比布局: 在做移动web页面时,我们要用百分比布局来实现自适应屏幕宽度。有pc端web页面开发经验的同学就会知道,元素的盒子模型(不清楚的同学可以去w3school上查查)。 那我想要一个元素100%显示,又必须有一个固定的padding-left/padding-right,还有1px的边框,怎么办? element{         width: 100%;         padding-left: 10px;         border: 1px solid blue; }   这样编写代码必然导致出现横向滚动条,肿么办?要相信问题就是用来解决的。这时候伟大的css3为我们提供了box-sizing属性,对于这个属性的具体解释不做赘述(想深入了解的同学可以到w3school查看,要知道自己动手会更容易记忆)。让我们看看如何解决上面的问题: element{         width: 100%;         padding-left: 10px;         box-sizing:border-box;         -webkit-box-sizing:border-box;         border: 1px solid blue; }  好的,问题被解决了!  3. rem设置字体大小; 在这里让我们花一些梳理一下css中的单位:px/em/rem(以下内容摘自0101后花园) px:就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现。但是,(听到但是的时候是不是突然有些不适,就像每次开发的同学喊我的时候,我的潜意识会告诉自己,坏了又出bug了!!)如果全篇用px布局会暗藏一个问题,就是当用户和Ctrl滚页面的时候(说白了就是ctrl+,ctrl-),你会发现页面结构产生了不可预知的错乱,因此有砖家倡导使用em替代px。 em:em是相对单位,em相对的基准点就是浏览器的字体大小(浏览器默认字体为16px),所以1em默认等于16px。那么14px=0.875em; 公式是14/16=0.875em。用em来写的话,就可以解决ctrl+,ctrl-时造成的页面错乱问题。  可是,问题又来了,em准确的说是相对于父节点的字号来计算的,如果自身定义了字号那么就相对自身字号来计算,举例如下: html { font-size: 100%; } .box-0 {     height: 1em;  } .box-1 {     font-size: 0.625em;      height: 1em;  }  看明白了吧,1em并不是一个固定不变的值,再加上数学是体育老师教的,这不是自作孽吗。没关系,css3为我们引入一个新的单位就是rem可以解决这个问题。  rem:rem和em一样也是一个相对单位,为了方便理解,我们就理解rem为root em,顾名思义rem只相对跟节点<html>计算,这就是说只要在根节点设定好参考值,那么全篇的1rem都相等,计算方式同em,默认1rem=16px; 同理你可以设定html { font-size:62.5% } 那么1rem就等于10px,以此类推 …(当然万恶的ie678不支持rem,但是还好我们在做的是移动端web页面)  4.使用css3; 做这种高大上的移动web页面怎么能少的了css3。不过平时css3用的比较少,这里记下几个我在这个项目中用到的css3属性。更深入的亲们自己去学咯。同样,这里不对属性做赘述,放着强大的w3school不用,我只能对你说:药不能停啊!:  A.圆角(这个太常用了) element{         border: 1px solid blue;         -moz-border-radius: 3px;         -webkit-border-radius: 3px;         border-radius: 3px; }   B.渐变(这个在做按钮的时候很常用) element{         background-image: -moz-linear-gradient(top, #2288cc, #389de2);          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #389de2), color-stop(1, #2288cc));  }   C.去掉手持设备点击时出现的透明层 (一般会在头部做格式化) a,button,input{         -webkit-tap-highlight-color: rgba(0,0,0,0);         -webkit-tap-highlight-color: transparent;  }  在应用了此属性时,链接的active属性会实效,解决的方法是,在页面unload时运行document.addEventListener("touchstart", function(){}, true);使active状态可用。(注:在小米系统下,点击链接仍然会出现红色的边框,各位同学如有解决方法,请赐教,不胜感激。)  D.改变盒子模型(上面已讲过) element{         box-sizing:border-box;         -webkit-box-sizing:border-box; }  
 
打赏
 
更多>同类新资讯
0相关评论

推荐图文
推荐新资讯
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  违规举报  |  豫ICP备14023129号