如何解决企业建站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像素，所以这些屏幕的显示效果要清晰很多。