1、第一背景图片必须采用backgroundsizecover来实现第二我们在进行H5页面内容规划布局设计的时候，不能把重要内容放在太偏下的位置或者偏上，否则前端布局时可能出现内容显示不全的情况；手机浏览器是把页面放在一个虚拟的quot窗口quotviewport中，通常这个虚拟的quot窗口quotviewport比屏幕宽，这样就不用把每个网页挤到很小的窗口中这样会破坏没有针对手机浏览器优化的网页的布局，用户可以通过平移和缩放来看；这里以移动端响应式网站为例，讲述如何制作响应式网页#xF4CF选定基本设计尺寸选定基本设计尺寸，一般以1080为基准确定响应式web设计的应用场景之后，和美工或设计师沟通，之前，一般需要美工出几套主流移动设备屏幕分辨率的设计图，现在，使用；23 点击22中的网站名就会在电脑上打开Safari的控制台，如下图点击查看大图3调试网页 此时你可以查看手机网页的DOM结构，并且和电脑端网页调试无异，当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来，如；1html5主页面 lt！doctype html lthtml lang=quotenquot lthead ltmeta charset=quotUTF8quot ltmeta name=quotviewportquot content=quotwidth=devicewidth，initialscale=1 userscalable=0quot lttitlehtml5 移动端单页面布局lt。

2、在移动端上，一定要让用户快速了解业务和内容，快速做出购买决策的过程五页面布局到第3屏幕牢牢相扣移动端app多数页面都是设计到3屏幕左右电商来说，一个页面的上下信息流转的过程是十分流畅的拿电商详情页来说，首先展示图片对于；3首先点击我的场景接着点击制作场景，接着会进入场景模板选择界面，里面有很多免费的模板4可以在模板中心选择一个自己需要的点击，直接套用模板，也可以选择自己创建一个空白页面5进入后就可以根据自己的；HTML5的移动端网页设计稿，通常情况下，内容区为750px或960px或者1080px的，一般不小于750px像素大小宽度设计稿可以比750px大，但是绝对不能比750px小，这个主要是由于当前手机的分辨率相对较高iPhone6是375物理像素；rem布局的兼容性Mozilla Firefox 36+Apple Safari 5+Google ChromeIE9+和Opera11+ie6ie8 还是别用rem 不过现在的手机一般浏览器，一般可以直接不用去管IE内核的浏览器了REM的计算公式 例html 设置font。

3、移动端不同于PC端，最大的区别是屏幕尺寸的限制，相同的内容显示效率要低很多如果直接按照PC端显示所有内容，页面信息自然混乱不堪作为交互设计师需要对信息进行优先级划分，并且合理布局，提升信息的传递效率下面来谈谈；这里我画了几种移动端常见的页面布局和他们的各自特点1，列表式布局 2，陈列式布局 3，九宫格式布局 4，选项卡式布局 5，轮播图式布局 6，伸展式布局 7，抽屉式布局 8，弹出框式布局 9，横向拓展式布局 10多面板。

4、假设设计图大小为1080px这也就意味着，在开发时，需要兼容的最大分辨率为1080px，最小的为320px2 调整视口 代码实例lt！DOCTYPE htmllthead ltmeta charset=quotUTF8quot lttitle布局之路移动端开发实例；9网页布局分为自然布局，浮动布局， 定位布局 10当一个元素被定义为浮动显示时，即定义为块状元素并且该元素就会收缩自身体积为最小状态所以，应该有个好的习惯即把浮动元素设置高和宽如果没有设置，则元素会按；1可直接长按此时间运营商插件，拖动到屏幕左侧或右侧移动到其它页面显示2或者长按删除此时间插件，到手机主菜单应用列表点击屏幕上方的“窗口小部件”找到“运营商与时间”长按拖动到中间的页面即可用手机挂；当屏幕超过最大和最小宽度时，页面将不再适合屏幕 弹性布局 灵活布局采用宽度和高度同时放大的方法，力求不同屏幕下页面布局一致 灵活布局兼顾了静态布局和流式布局的优点一方面可以适应屏幕的变化，另一方面也不会造成页面横向加宽。