em设计手机网页（手机网站设计）

本文目录一览：

• 1、响应式网页的主流技术有哪些?
• 2、em和rem布局怎么使用Em和rem
• 3、如何进行移动端的页面开发
• 4、移动端Web页面适配方案(整理版)
• 5、手机端网页尺寸是多少?

响应式网页的主流技术有哪些?

响应式Web设计（Responsive Web design）的理念是：页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。

响应式图片：响应式图片技术思想：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。这个技术的实现需要使用几个相关文件，我们可以在Github上获取。

Framework52 Framework主要用于优化HTML5和CSS3的跨浏览器兼容性的框架，可在所有主流浏览器上运行。PureCSSPure是一组小的、响应式CSS模块，可用于任意Web项目中。

一是通过各种技术写一套响应的代码，要用到的技术，如通过设置百分比宽，使用栅格系统，和通过媒体查询，弹性布局等结合来实现。这样写的好处了代码只需要写一套。但是这样写要做兼容各种移动端肯定会有各种各样的问题出现。

响应式是一种设计理念与前端技术紧密结合的新兴形态，鼓励尽早进行跨职能沟通协作。交互确定响应式框架和栅格系统后，其他角色就可以同步开展工 作了。前端开始介入完成栅格和框架搭建，产出页面基础框架。

AJAX全称为“AsynchronousJavaScriptandXML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。

em和rem布局怎么使用Em和rem

1、移动端可以用rem布局，也可以用px（主要是flex），这要看产品是怎么设计的。Css3规定1rem的大小是根元素html>的字体大小的值。Rem其实是一个单位，是一个相对的单位根em。

2、如果是弹性布局，假设在640px的屏幕下，设置1rem = 16px，那么 64px即为4rem大小。在1080px的屏幕下，设置1rem = 27px，4rem的大小变成了 4 * 27 = 108px。元素大小也随着屏幕变大了。

3、常用的布局单位包括像素（ px ），百分比（ % ）， em ， rem ， vw/vh 。

如何进行移动端的页面开发

1、可直接长按此时间运营商插件，拖动到屏幕左侧或右侧移动到其它页面显示。或者长按删除此时间插件，到手机主菜单应用列表--点击屏幕上方的“窗口小部件”--找到“运营商与时间”--长按拖动到中间的页面即可。

2、Shift+↑：shiftUp（），手机屏幕页面向上移动一点，shiftUp比up向上移动速度快，幅度大。Shift+↓：shiftDown（），手机屏幕页面向下移动一点，shiftDown比down向下移动速度快，幅度大。

3、用java进行移动端后台开发方法：第一种：可以选择用JavaEE的编程结构去编写，需要把HTML的界面转换成其他的数据，例如json、xml，二者选择其中一个即可。

4、当你的移动应用开发接近尾声，需要找一下测试人员，看看在生产环境下的使用效果，了解下移动应用的用户体验是否符合预期，如果不达标，那么开发人员就需要尽快调整产品。

5、后端：移动前端和后端的交互通过ajax请求来实现，具体不详细说明。

6、于是，移动端的开发方向逐渐向移动端网页倾斜。对于PC端，我们一直使用的是px（像素）进行代码的书写，但是到了移动端，需要面临不同的分辨率。

移动端Web页面适配方案(整理版)

移动端web页面的开发，由于手机 屏幕尺寸 、 分辨率 不同，或者需要考虑 横竖屏 问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。

首先，在网页代码的头部添加一行viewportmeta标签。Viewport是网页的默认宽度和高度。上面的代码意味着网页的默认宽度等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为0，即网页的初始大小占屏幕面积的100%。

准备编辑HTML 首先确定要使用的背景颜色，HTML颜色由每个代码决定。在计算机的Web浏览器中访问http：//，就能查看所有颜色的代码，并且在“HEX”部分中选择要使用的基色。

前几天开发公司产品官网的时候，遇到了一些适配问题，当时选择用postcss-px-to-viewport方案来实现适配，效果也很显著，每个页面都适配到位 step vue安装postcss-px-to-viewport插件。

本文的目的主要是分析解决移动端H5页面适配问题过程中牵扯到的知识点，然后梳理分析目前常见的适配解决方案。

以URl适配为例，这里需要注意的是，url对进行填写的时候，需要是pc端和移动端进行一一对应，中间用“空格”隔开。其中url对的书写也最好是收录和排名较好的网页。也可以直接上传url文件，进行大批量的url对上传。

手机端网页尺寸是多少?

1、Android的最小点击区域尺寸是48x48dp，也就是说在xhdpi设备上，按键尺寸至少是96x96px。在xxhdpi设备上，它是144x144px。 无论画布设置多大，我们设计的都是基准放大的界面风格，开发者需要的单位都是逻辑像素。

2、PC端网站常用的宽度尺寸是1024像素（px），不需要前端人员在这个页面的基础上耗费功夫。但是对于手机网站就要特别注意了，如果我们用640px作为标准，那么当用户用320px的手机访问的时候，守旧就只能显示网站的一半大小。

3、iPhone手机网页的设计尺寸iPhone5尺寸是640x1136px分辨率是326PPI。iPhone4和iPhone4S尺寸是640x960px分辨率是326PPI。iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px分辨率是163PPI。

4、要根据不同手机不同的屏幕分辨率来规定尺寸。一般做效果图主流都是做480*800来测试，iphone4（或s）就用640*960，但这个都只是效果图，真正开发还需要切图用点9来做屏幕适配。

5、手机端网页就没有统一标准了，比较流行的做法是按照iPhone 5的尺寸来设计。倍率2，逻辑像素320x568。 这样的做法比较实在，倍率2的屏幕无论在iOS还是Android方面都是主流，而且又是2倍屏幕中逻辑像素最小的。

6、PC端页面的尺寸宽度1920px，高度尺寸按照页面所需信息来定即可，显示尺寸19201080px；手机端页面的尺寸宽度750px，高度尺寸按照页面所需信息来定即可。