聊聊PC端页面适配

Posted 2020-09-01

目也pc端有适配的需求：目前我们pc项目的设计稿尺寸是宽度1920，高度最小是1080。

适配目标：

1.在不同分辨率的电脑上，网页可以正常显示

2.放大或者缩小屏幕，网页可以正常显示

对于宽度的适配

 

对于宽度适配：

首先设置html,body{width:100%;overflow-x:hidden;}

然后我们可以把页面分解为背景层(一般宽度都会大于1200px)和内容层(一般宽度都会小于1200px)，对于背景层，我们一般都要求完全铺开，主要有以下几种情况：

1.背景色为纯色：我们可以直接.box{background:#fff；width：100%；}则可以铺满

2.背景设置为背景图片：

我们有情况用.box{background: #fff url(images/01.png) no-repeat center center;width:100%;height:100px;}

有的情况需要用：.box{background: url(images/01.png) repeat left center;width:100%;height:100px;}

对于内容层我们保证我们的内容都封装在盒子内，然后margin:0 auto;保持居中显示，盒子里面的内容，我们再另外调整

 对于高度的适配

 一般情况下，页面都比较高，我们通过给每个模块设置具体的高度值来做页面，然后页面会出现导航条，我们可以拉动导航条来浏览，但是有的页面的需求是主体内容直接在不同的浏览器上都能完整显示，不通过导航条来浏览

如何做？

1、百分比的应用

百分比的应用在于主视角的定位和缩放，百分比的取值以原设计稿的尺寸为标准。什么意思呢？举个栗子，一个元素在原设计稿里，量出来距离顶部是 200px，如果写死可能是top:200px 或者margin-top:200px,现在要转成百分比，那么这个值可能就是23.3%。这个值怎么算？如果设计稿是 1080，200/1080=18.51%这样计算出来百分比的值。

但是，有个地方要注意，流体布局下，百分比的值是根据父层计算的；absolute布局的元素是根据最近的relative父层计算的；fixed布局的元素是根据window的可视区域计算的。

所以，如果要达到适配的效果，不只是当前元素需要用百分比值，其参考计算的元素也是要动态变化的。

另 外还有一个就是图片缩放的问题，pc很多主视角都是切图的，但是pc不能直接用background-size（虽然强大的filter兼容可以使低版本 ie支持，但是之前说过用filter都要特别小心，特别是涉及到js交互操作的，很多坑）。在pc我们可以直接通过img标签来插入图片，通过设置 img宽度为100%，高度auto，然后让它根据父层来等比缩放来实现（img标签实现缩放引起的另一个问题是该图片不能用雪碧图了，但pc的主视角不 是很多，影响不大）。

2、js监测

需要js主要有两个原因：

上面说了，百分比是要有父层做参照物的，那么如果父层都用百分比，那就是最终是根据window来参照的，因为pc绝大部分都是宽屏设备，而且他们的比例是不一致的，我们来计算下(190是减去浏览器工具条、window桌面条、我们页面通用顶条)：

设计稿：1920/(1080-190) = 2.16

14寸普通笔记本：1366/(768-190) = 2.36

所以，我们不能宽高都100%按照屏幕尺寸来计算。另外考虑到主要是高度对pc页面的主视角影响比较大，我们需要借助js来计算确定一个最小高度临界值（当然这个可以用css的min-height来实现）；

另外一个是，通过js判断最小高度临界值，再加上这个最小临界值的class，为了处理那些特殊的布局或者百分比无法完全解决适配的元素，比如字体的相关布局