前言这篇文章应该算是移动Web开发的宣誓稿了。作为移动领域的门外汉，接触了这段时间，发现前端开发越来越深了！话不多说，进入正题。我将从以下几个方面讨论移动Web前端开发：分辨率、屏幕、移动浏览器、设计理念、响应式Web开发。分辨率手机的分辨率比个人电脑复杂得多。有什么决议吗？体型上有这么大的差距吗？这在一定程度上给页面制作带来了很多麻烦。因此，必须充分考虑这些因素。我从两个方面来思考：1）市场主流手机厂商的产品分辨率。经过调查发现，目前主流的手机分辨率有：480*800像素、320*480像素，1280*720像素（720P）将是下一个趋势。这些都是很粗略的统计，要有准确的数据需要付出很大的努力，这是数据分析师的工作。2)项目目标群体持有设备的分辨率。项目的目标群体是用户。用户拥有什么样的手机分辨率在一定程度上比第一点更重要。它决定了项目的发展方向。屏幕目前市面上的手机屏幕有两种：普通屏和视网膜屏。视网膜屏幕与普通屏幕最大的区别在于它的显示性能更好，图像更细腻。苹果从iphone4和newpad开始采用retina屏幕。视网膜屏幕的评价指标是基于超过300ppi的像素密度。以iphone4为例，像素密度的计算方法如下：1）分辨率640:960=2:32）勾股定理取对角线值，根数22+32=3.63）像素密度（960*3.6）/(3.5*3)=326，其中3.5是屏幕尺寸，3是960对应的最终值。计算过程中有误差，不用太担心。视网膜屏幕的出现带来了一个新概念：“设备像素”。设备像素与CSS像素不同。这方面的研究可以参考张新旭的这篇文章《视网膜New iPad与普通分辨率iPad页面的兼容处理》。里面讲解的很详细，让我受益匪浅。手机浏览器浏览器已经从传统的桌面端逐渐向移动端转移，竞争也越来越激烈。目前国内市场主流的手机浏览器有：UC、百度、欧朋、QQ、海豚、Safari、Chrome。这些浏览器都是基于webkit内核的，兼容性没有问题。同时，它们对html5和css3的支持也很好。好吧，那么，大胆应用html5和css3技术吧。设计理念（3S原则）3S原则是指：Simple、Small、Speedy。这是国外一位大牛总结的，见《Mobile Web Design: Best Practices》。我完全同意这三点。我想说的是，Speedy严格意义上应该算是一个结果，而不是一个原则。在网页设计方面，我一直提倡简洁的风格：操作方便、界面清爽、提示友好、图片少而精、代码精简等。当这些都做到了，我相信网站会变得极速。移动网络开发应该优先考虑手机的固有特性。首先，手机屏幕比桌面屏幕小，能够全屏显示的内容并不多。这就需要我们在设计页面的时候选择合适的字体大小，同时还要考虑文档内容的优先级，把重要的内容放在前面。展示;其次，手机的交互方式让我们不得不重新考虑页面元素的设计。桌面网页主要靠鼠标操作，可操作范围非常精准。移动端网页主要通过触摸操作，手指的操作范围比较广，在页面上体现的比较明显。我以按钮为例。对于分辨率低的小屏幕手机，按钮可以设置为.button{display:block;}，对于大屏幕分辨率高的手机，可以设置为.button{display:inline-block;}，这是一个按钮。对于链接列表，需要设置合适的行高，避免可点击范围过小，造成操作失误；最后，图片。手机开发要尽量避免使用图片，比如圆角、阴影、渐变等，以前在桌面上不容易实现，现在手机开发中已经不存在了，用css3可以实现，所以设计师在设计psd效果图的时候，做出了效果，但是裁图的时候不一定要给。我认为所有的设计理念都是为了提升用户体验而提出的。当我们的目标人群确定后，如何提升用户体验是我们设计的出发点。响应式网页开发这不是一个突破性的技术变革，但我理解后仍然觉得EthanMarcotte很了不起。简单来说，响应式网页设计是利用媒体查询、流体布局和流体图像三种技术，并将它们组合起来制作页面，让页面不仅可以在传统台式机上展示，还可以在平板电脑和手机上展示。分辨率可以完美显示。要做到这一点，我觉得不难，请继续：1)准备工作：a)插件安装：windowresize。您可以通过以下链接下载并安装它https://chrome.google.com/webstore/search-extensions/window%20resize。安装成功后，调整浏览器窗口时，浏览器右下角会有灰度提示。类似于手机视口的窗口和大小提示。截图如下：b)编辑器安装：sublineText2（支持html5，安装css3扩展失败），topStyle5（支持css3）。c)找出视口和屏幕之间的区别。视口是浏览器的内容显示区域，屏幕是设备的物理显示区域。比如视口的宽度一般用width表示，屏幕的宽度用device-width表示。相信做过移动端页面的童鞋们经常看到这段代码：
