如何解决企业建站H5页面的多终端适配问题

  在企业H5建站产品开发的时候,设计师通常会选择iPhone6作为基准设计尺寸,交付给前端的设计尺寸是按750px*1334px为准(高度会随着内容多少而改变)。前端开发人员通过一套适配规则自动适配到其他的尺寸。
 
  企业H5建站前端开发完成终端适配方案拿到设计师给的设计图之后,剩下的事情是前端开发人员的事了。
 
  前端的解决方案通常是用自适应(Flex,百分比)+rem.更高端一点的办法就是通过Iconfont或者svg来处理Icon,用bootstrap的栅格处理列表和布局。这些都会有个通病就是无法动态处理宽度改变,以及低版本的安卓机没法控制缩放比例。所以我们可以针对这些问题整理出一套完整的终端适配方案
 
  屏幕适配,一直是作为一个前端开发始终逃不掉的问题,这个话题可以追溯到最开始的PC端浏览器的不同分辨率,再到移动端不同的屏幕尺寸,一直伴随着前端工程师的日常的企业H5建站页面开发工作。
 
  所谓H5建站屏幕适配,可以理解为一个网页元素或者网页布局,在不同尺寸,分辨率等场景下,如何呈现最佳的效果。从最早的PC端屏幕来说,大部分的屏幕适配采取的是:页面框架最外层元素宽度固定,并且居中,高度随内容自适应,比较常见的是宽度为960px~1080px。页面内部的元素大多数使用盒子模型构建,采用固定宽高,当内容超出时,会出现滚动条。对于一些需要根据屏幕不同而展示不同大小的元素,可以给元素设置百分比的单位。
 
  随着HTML5和CSS3的到来,逐渐出现了弹性布局(flex布局),媒体查询MediaQuery,和响应式页面概念,这些特性都可以应用在PC端以及移动端屏幕适配解决方案中。除了这些之外,还有rem和vw方案更加有针对性的解决移动web页面的适配问题。
 
  物理像素和CSS像素像素,也就是px,实际是pixel的缩写,它是图像显示的基本单元,每个像素可以有色彩数值和位置,每个图像是由若干个像素组成,比如对一幅标有1024×768像素的图像,就表明这幅图像的长边有1024个像素,宽边有768个像素,共有1024×768=786432个像素组成。但是从概念上来说,像素既不是一个确定的物理量,也不是一个点或者小方块,而是一个抽象概念。所以像素所代表的具体含义要从其处于的上下文环境来具体分析。物理像素和CSS像素就是不同的上下文。物理像素:设备屏幕实际拥有的像素点,主要和渲染硬件相关。比如iPhone6的屏幕在宽边有750个像素点,长边有1334个像素点,所以iPhone6总共有750*1334个物理像素。CSS像素:也叫逻辑像素,是软件程序系统中使用的像素,每种程序可以有自己的逻辑像素,在web前端页面就是对应的CSS像素,逻辑像素在最终渲染到屏幕上时由相关系统转换为物理像素。设备像素比:一个设备的物理像素与逻辑像素之比。可以在JavaScript中使用window.devicePixelRatio获取到。其实对于早期PC端web页面来说,在的CSS里写个1px,屏幕就给你渲染成1个实际的像素点,此时的设备像素比是1,这时物理像素和CSS像素是一样的。但是对于一些高清屏,例如苹果的retina屏幕,这种屏幕使用2个或者3个物理像素来渲染1个CSS像素,所以这些屏幕的显示效果要清晰很多。