原文地址:http://blog.csdn.net/small_rice_/article/details/22690535

在智能手机横行的时代,作为一个web前端,不会编写移动web界面,的确是件悲催的事情。当公司准备做一个微信的微网站时,作为一个多年经验的web前端码农,我迷茫了,真心不知道从何下手。
接下来就是搜一堆教程,然后开始编写代码,三天后,我的第一个移动端web页面编写完成。
回头想想,移动端的web页面代码编写远没有我想的那样复杂(可能是我做的这个项目比较简单的缘故)。但是就入门来说,其实是蛮简单的,我把他总结为一下几个方面:特殊的meta标签/百分百比布局宽度/rem设置字体大小/css3的使用。
好吧,让我们开始吧,以下是移动web新手的浅见,老鸟请绕行,如有赐教不胜感激。
1.特殊的meta标签;
因为现在我们用的智能手机(iOS,Android)的浏览器都是基于webkit内核,这里有一些针对webkit的特殊meta标签,在开发移动端web是起到很重要的作用:
 
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 
强制让文档的宽度与设备的宽度保持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; /* 此时height等于16px */
  • }
  • .box-1 {
  • font-size: 0.625em; /* 此时基准字号以变更为16*0.625=10px */
  • height: 1em; /* 此时实际height等于10px */
  • }

复制代码

看明白了吧,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); /* Firefox */
  • background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #389de2), color-stop(1, #2288cc)); /* Saf4+, Chrome */
  • }

复制代码

C.去掉手持设备点击时出现的透明层 (一般会在头部做格式化)
  • a,button,input{
  • -webkit-tap-highlight-color: rgba(0,0,0,0);
  • -webkit-tap-highlight-color: transparent; /* For some Androids */
  • }

复制代码

在应用了此属性时,链接的active属性会实效,解决的方法是,在页面unload时运行document.addEventListener("touchstart", function(){}, true);使active状态可用。(注:在小米系统下,点击链接仍然会出现红色的边框,各位同学如有解决方法,请赐教,不胜感激。)
D.改变盒子模型(上面已讲过)
  • element{
  • box-sizing:border-box;
  • -webkit-box-sizing:border-box;
  • }

复制代码

5.关于调试;
好了,有了上面的知识,我们就可以写一个移动的页面了。但不要太乐观了,我们要怎么调试呢?难道每写一个页面就发一次服务器,然后用手机访问测试环境!当然不需要那么麻烦,如果是用pc机的同学,可以用一个本地localhost工具调试(这次就不要各位自己动手了,附送上我自己用的工具。用法很简单,把所有的页面放到一个文件夹中,页面放在根目录下,工具也放在跟目录下,把你要调试的页面改成index.html。当然如果你有好几个页面,最好还是做一个index页面。启动调试器,用手机访问你电脑的ip,要保证手机所用的wifi和pc的网络在一个网段)。用mac的同学就到网上找一篇localhost的配置方法,开启以下这个功能就可以访问了。

移动web前端小结的更多相关文章

  1. 移动web前端小结(一)

    这段时间做了几个移动项目的前端页面,姑且称之webapp.做这几个项目之前根本没接触过移动端的相关知识,以为和PC端页面没啥区别无非就是尺寸小一点罢了.上手以后发现问题颇多.下面从框架.相关知识点.遇 ...

  2. 移动web前端小结(一)--摘自小鹿_同学

    一.框架 框架:Bootstrap+HTML5 Boilerplate. 两个框架整合到一起可以看一下这位大神的文章:<使用 Bootstrap 和 HTML5 Boilerplate 开始一个 ...

  3. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  4. Web前端工作2个月小结

    开始语: 2013年6月30日,Microsoft Learning support 项目结束,转而进入Forerunner Development 项目,这对于这块领域空白的我,空前的困难,可是我坚 ...

  5. WEB前端性能优化小结

    转:http://www.gafish.net/archives/1514 对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不 ...

  6. web前端知识体系小结(转)

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  7. TFC2017 腾讯Web前端大会参会小结

    简述 上周有幸参加TFC腾讯Web前端大会,见识了各路前端大神的精彩演讲,干货满满的.会议流程分为上午主会场,以及下午的三个分会场.分享的主题涵盖Web新技术.Node.js.框架.工程化. 图形处理 ...

  8. 小白入门Web前端开发学习一周小结

    说之前还是先说点其他的,简单介绍下自己为何选择web前端开发: 本人之前在一家国企单位从事质检工作,干了3年,工资和待遇还算不错,但由于其工作的流动性导致知识的脱轨以及精神上的空缺,最后还是打算在25 ...

  9. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

随机推荐

  1. 001_chrome工具详解

    一.chrome https://segmentfault.com/a/1190000000683599

  2. centos6.5环境DNS-本地DNS服务器bind的搭建

    centos6.5环境DNS-本地DNS服务器bind的搭建 域名系统(英文:Domain Name System,缩写:DNS)是因特网的一项服务.它作为将域名和IP地址相互映射的一个分布式数据库, ...

  3. 字符串格式化格式 -- Numeric Format Strings

  4. webRTC视频通话,https协议,录制端和播放端

    最近做视频直播模块,在网上也看到很多大神写的代码,写的都不错,但不是我想要的,有的可能比较老,不支持https协议,有的又将直播端和显示端放在一个程序中,不利于我使用,则本篇着重添加了https协议( ...

  5. 关于伪类“:pseudo-class”和伪元素“::pseudo-element”的常见应用

    伪类用于指定要选择的元素的特殊状态,向其添加特殊的效果,比如: input { width: 515px; height: 50px; padding: 10px 20px; border: 1px ...

  6. 优雅的将Map转为String工具类

    import com.alibaba.fastjson.JSONObject;import org.apache.commons.lang3.StringUtils; import java.lang ...

  7. Windows栈溢出原理

    1.栈是什么? 栈是一种运算受限的线性表 其限制是仅允许在表的一端进行插入和删除运算 这一端称为栈顶(TOP),相对的另一端称为栈底(BASE) 向一个栈插入新元素,称作进栈.入栈或压栈(PUSH) ...

  8. Android-序列化-Serializable/Parcelable

    Android-序列化-Serializable/Parcelable 学习自 <Android开发艺术探索> 序列化漫谈 IPC的首要目的是传输数据,当然不能仅仅是传输一些基础数据了,毕 ...

  9. 【BZOJ 1211】 1211: [HNOI2004]树的计数 (prufer序列、计数)

    1211: [HNOI2004]树的计数 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2468  Solved: 868 Description 一 ...

  10. BZOJ4065 : [Cerc2012]Graphic Madness

    因为两棵树中间只有k条边,所以这些边一定要用到. 对于每棵树分别考虑: 如果一个点往下连着两个点,那么这个点往上的那条边一定不能用到. 如果一个点往下连着一个点,那么这个点往上的那条边一定不能用到. ...