移动端高清适配、布局开发解决方案

前言:移动端的适配是个大问题,特别是安卓,国内版本众多,不规则的dpr数不胜数,为了适配各种移动终端,网易、百度、阿里各大厂都有自己的适配解决方案。要解决哪些问题呢?

  • 不同设备下的统一视觉体验。
  • 不需要手动设置viewport,根据当前环境计算出最适合的viewport
  • 支持任意尺寸的设计图,不局限于特定尺寸的设计图。
  • 支持单一项目,多种设计图尺寸,专为解决大型,长周期项目。
  • 支持px2rem转换方法,CSS布局,原始值不丢失。
  • 有效解决移动端1像素问题。

1、首推阿里的flexible适配方案,酷、靓、好用。阿里无线前端团队开发的,手淘的H5页面在使用。

  github传送门:https://github.com/amfe/lib-flexible/

  flexible详解:https://github.com/amfe/article/issues/17

  flexible一个案例:http://huodong.m.taobao.com/act/yibo.html

2、墨尘大大写的hotcss,比flexible稍轻量,开发利器。

  github传送门:https://github.com/imochen/hotcss

  hotcss一个案例:http://imochen.github.io/hotcss/example/normal/

3、插件px2rem保留源文件px,将px转化成rem

  npmjs传送门:https://www.npmjs.com/package/px2rem

  配合gulp使用:gulp-px3rem  https://www.npmjs.com/package/gulp-px3rem

  配合webpack使用:px2rem-loader  https://www.npmjs.com/package/px2rem-loader

  

时间: 2024-10-07 00:43:33

移动端高清适配、布局开发解决方案的相关文章

移动端高清适配方案(解决图片模糊问题、1px细线问题)

本文介绍了移动端适配的3种方法,以及移动端图片模糊问题和1px细线问题的解决方法.当然了,在这之前先整理了与这些方法相关的知识:物理像素.设备独立像素.设备像素比和viewport. >>>>物理像素.设备独立像素和设备像素比 在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的.CSS中的像素只是一个抽象的单位,在不同的设备或不同的环境中,CSS中的1px所代表的物理像素是不同的.在PC端,CSS的1px一般对应着电脑屏幕的1个物理像素,但

移动端高清、多屏适配方案

移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对i

【原创】移动端高清、多屏适配方案

移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对i

移动端高清、多屏适配方案——rem

背景: 开发移动端H5页面 一套设计图 不同尺寸的手机 不同分辨率的手机 方案:使用rem作为单位解决一套设计图适应不同分辨率,不同尺寸的手机. 概念: REM(font size of the root element). 相对于<html>的font-size的计算方式. dpr(device pixel ratio).设备像素比:i5,6 = 2;i6plus=3; <meta content="width=device-width; initial-scale=1.0;

移动端高清屏适配方案

结论: 用户体验要求很高的页面,如UV较高的页面,活动页这些应该以用户体验优先,应用flexiable方案 在其它页面,固定视口,不缩放,使用rem做布局适配,js添加屏幕标识以便调整字体大小(即布局使用rem,字体使用百分比),使用@2x图片,只做ios8+的1px处理 面临的问题: 在不同大小和高清的屏幕下: 如何保证 界面布局 一致性:不错乱,不变形 如何保证 字体大小 一致性:大屏显示更大,小屏显示更小或更多 如何保证 1px边框 一致性:不同的高清屏也在正常显示1px的高度大小 如何保

css图片高清适配

同一张图片,在普通屏显示正常,但高清屏出现模糊.原因是原来一个像素的点分成的四个像素的点进行了显示. 解决方案:在高清屏中把图片变成二倍图,前提是二倍的高清图已经存在. .icon{ background: url(bg.png) no-repeat; /* 宽200px; */ } @media screen and (-webkit-min-device-pixel-ratio:1.5){ .icon{ background-image: url(bgx2.png); /* 宽400px;

移动端web自适应适配布局解决方案

100%还原设计图,要注意: 看布局,分析结构. 感觉难点在于: 1.测量精度(ps测量数据): 2.文字的行高. 前段时间写个移动端适配的页面(刚接触这方面),查了一些资料,用以下方法能实现: 1.设置理想视口: 自动适应屏幕宽度 :网页的宽度默认等于屏幕的宽度 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.

M-移动端高清、多屏适配方案

相关文档 rem 现在手机分辨率这么大,如何写响应式布局?

移动端,多屏幕尺寸高清屏retina屏适配的解决方案

移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对i