pc端页面适配（个人理解）

谁借莪１个温暖的怀抱￠ 2022-03-28 13:50 339阅读 0赞

目也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，为了处理那些特殊的布局或者百分比无法完全解决适配的元素，比如字体的相关布局

发表评论取消回复

表情：

评论列表（有 0 条评论，339人围观）

还没有评论，来说两句吧...

相关阅读

相关 PC、移动端适配 - Vue、H5、 Jquery

Vue 移动端、PC 端适配可以使用lib-flexible、amfe-flexible、postcss-pxtorem、postcss-px2rem、postcss-px-t

野性酷女/ 2024年03月22日 15:41/ 0 赞/ 84 阅读

相关 (详解)关于lib-flexible 适配pc端移动端

1.安装 npm install lib-flexible 2.修改配置文件修改里面的flexible.js 文件里面的refreshRem()函数就可

傷城~/ 2023年10月09日 14:19/ 0 赞/ 32 阅读

相关移动端适配及PC端适配心得总结体会(二) (可能比较全

前篇☞ [移动端适配及PC端适配心得总结体会(一) (可能比较全][PC_] web适配产生的问题 1.浏览器mate指定内核 QQ浏览器 meta元素检测识别

Love The Way You Lie/ 2022年12月17日 05:58/ 0 赞/ 136 阅读

相关移动端适配及PC端适配心得总结体会(一) (可能比较全

1.相关概念 1像素 1.像素像素就是构成图像的最小单位,指显示屏上的最小单位, 图像由像素组成,单位面积内的像素越多效果就越好像素的大小不是绝对的,是根据

亦凉/ 2022年12月17日 05:57/ 0 赞/ 348 阅读

相关移动端页面适配(px2rem)

1、安装引入lib-flexible . 　　安装lib-flexible：　　npm i lib-flexible --save

快来打我*/ 2022年12月16日 13:12/ 0 赞/ 222 阅读

相关 flexible.js+rem解决pc端和移动端适配

第一步：新建 `flexible.js`文件 > 这里默认是10等份，手动改为24，此时1rem=1920/24px即80px。（设计稿是1920px的） (f

谁借莪１个温暖的怀抱￠/ 2022年11月17日 11:29/ 0 赞/ 457 阅读

相关 PC端和移动端如何实现字体适配

rem与适配 rem介绍： rem的出现解决了em的计算问题，rem的参照物就是根元素（html）的font-size，这让我们对于不同的页面设置全局标准的成为可能

淩亂°似流年/ 2022年10月23日 01:55/ 0 赞/ 292 阅读

相关 pc端页面适配（个人理解）

目也pc端有适配的需求：目前我们pc项目的设计稿尺寸是宽度1920，高度最小是1080。适配目标： 1.在不同分辨率的电脑上，网页可以正常显示 2.放大或者缩小屏幕

谁借莪１个温暖的怀抱￠/ 2022年03月28日 13:50/ 0 赞/ 340 阅读

相关移动端适配

在上一片文章里，关于如何使用rem进行布局，我作了一个大概的描述。今天这篇文字，主要说一个东西－dpr。我们都知道，移动端开发，运行的平台主要是 ios 和 andr

野性酷女/ 2022年01月25日 18:23/ 0 赞/ 472 阅读

相关移动端 H5页面适配

![这里写图片描述][1] 一、基础概念 -------------------- 在了解如何做H5页面适配前，大家都应该把移动端涉及的一些概念搞明白，比如：dpr

谁借莪１个温暖的怀抱￠/ 2021年09月18日 09:04/ 0 赞/ 705 阅读