pc端屏幕适配方案,电脑适配屏幕

响应式布局-PC端和移动端同时适配

第二种rem响应式布局方案(等比缩放)：

使用的时候按照1920的设计稿来做。100px=1rem，font-size设置成100px;750px的设计稿1rem=100px设置屏幕超过2560及以上，就固定1rem=200px，宽度小于600及以下，就固定1rem=32px

第三方库用的一般是使用px单位，无法使用rem适配不同设备的屏幕。

解决办法：使用px2rem-loader插件将第三方ui库的px转换成rem单位。

移动端设计稿一般都是750px的，所切的图就是@2x的，在一些DPR为3.0的手机上使用@2x图片大多数也会显示的很清晰，这样就是为什么设计稿要750px的

pc端页面一滚动一屏幕时候如何解决适配问题？希望不是复制粘贴的。回答最好详细一些。

由你上边说的应该是Windows的印屏幕功能：先把文件的窗口打开，按有Windows图标的那个键+PrintScreen/SysRq在Windows的开始→程序→附件→画图在画图的窗口：编辑→粘帖或者直接按Ctrl+V以上个人经验供参考

PC端页面适应不同的分辨率的方法

这个方法的思路是，分别针对800、1280、1440、1600、1920等分辨率，创建不同的css文件。然后在各种分辨率下，写css样式表。

可能你会感觉针对一个页面，要写这么多不同的css样式表，这个工作量肯定很大。其实也不尽然，根据我在这个项目中的实践，发现这个工作量其实是比较小的。

首先，我们在做项目的时候，一般情况下会有一些范围限制，比如这个项目只需要适配1280~1920分辨率即可。而且各个分辨率之间，我们有的时候只是对页面上的元素进行宽高、尺寸、位置等进行调整，整体的一个框架是相似或者说是相同的。

不仅如此，有的时候项目的要求不高，没有比较1:1高度还原设计稿，那么这个时候，我们在1440分辨率下的样式表，在1280分辨率下也是实用的，这个时候，我们的工作量又进一步减少。

这个时候，我们可以先完成一个分辨率下的css样式表。然后在这个基础之上，对其他分辨率进行调整即可。这个过程我们只需要调整一些参数即可。

比如在我的项目里面，这对不同的分辨率，我只做了三个样式表

这个时候，我们只需要在我们的HTML页面的head/head标签中，使用js，根据不同的电脑分辨率，加载不同的css样式表。注意这里的js一定要写在head/head标签里面，这样在加载页面内容之前，可以提前把css样式表加载出来

这样的话，就可以根据不同电脑的分辨率，就在不同的css样式表。由此我们便完成了页面使用不同的分辨率。

媒体查询是CSS3的新特性，绝大多数浏览器都可兼容这一特性。这个方法的思路也是根据不同的分辨率，应用不同的css样式。

如果你对媒体查询不熟悉，可以点击链接进行学习这一新特性。菜鸟教程-CSS3@media查询

这个思路和和方法一差不多，或者说方法一的思路和这个思路差不多，毕竟这也是官方的做法。我们有两种使用媒体查询的方式。

这个方法和方法一相同，也是通过判断电脑的分辨率，来引入相对应的css样式表。

这个方法只有一个css演示表，在这个样式表里面，根据不同的分辨率，写不同的css样式。

以上的方法的思路大同小异，根据我自己的经历，给大家提出一些小的建议。

因为我在公司的电脑的分辨率是1440，所以一开始我实在1440分辨率下写得css样式表，然后在这个基础之上，去调整其他的分辨率。发现根据小分辨率样式去调整大分辨率样式比较简单。当然，也许你喜欢由大到小，这都无所谓，看个人兴趣。

还有就是，我们在写css样式标的时候，尽量写得规整一点。某一部分的css样式写在一起，最好有注释，这样我们在其他分辨率下去调整的时候，不至于一头雾水。

移动端，PC端是怎么做适配的？

px：像素

em：一个M的宽度（面试：一个字的宽度）

rem：rootem根元素（html）的font-size//oppo个别机型不适用

vh：viewheight，视口高度100vh===视口高度

vw：viewwidth，视口宽度100vw===视口宽度

浏览器默认font-size:16px;

Chrome浏览器默认最小字号为12px：font-size:12px;

所以一般情况下，rem的font-size不要小于12px;

rem就是html元素的font-size，默认为16px;(浏览器默认font-size)

rem和em的区别：

1.metaviewport

metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/

2.媒体查询

更具查询结果选择不同的css样式,设置屏幕最大宽度，如果页面范围在这个宽度内就可以显示对应的CSS，以最大500为例

style

@media(max-width:500px){

......

}

/style

3.动态rem方案

一切单位以屏幕宽度为标准，就能完美还原设计稿。

动态REM思路：动态rem采用整体缩放的思想，在页面渲染之前，使用JS获取设备宽度并设置rem(1rem==htmlfont-size==viewportwidth)，之后的布局单位全部使用rem来实现整体缩放。

在使用动态rem布局的移动端页面中，很小的宽度如border-width依然使用px，因为即使使用rem，当rem小于1px时，依然会被浏览器当做1px使用。

VUE移动端及PC端适配方案

前几天开发公司产品官网的时候，遇到了一些适配问题，当时选择用postcss-px-to-viewport方案来实现适配，效果也很显著，每个页面都适配到位

step1.vue安装postcss-px-to-viewport插件。

step2.配置适配插件的参数

使用PostCss配置文件时，在upostcss.config.js/u添加如下配置：

或者在upackage.json/u中，添加以下配置：

说明下几个重要参数的使用：

适配存在的问题点：

注：执行指令后在package.json的devDependencies分支可以看到相应的版本，

2.在main.js中导入lib-fixible.

如果未使用vue的伙伴可以直接在前端中直接使用阿里的CDN，如下：

注：此处是postcss-px2rem而不是px2rem-loader,网上很多文章都引用是后者，会导致在配置时候无法成功配置。

在vue.config.js中配置如下配置即可，如未有此文件请自行搜索查询创建配置。

集成以上两个步骤，基本前端即可根据屏幕自行适配，但可能有部分伙伴会遇到data-dpr始终为1，遇到这个情况多半是因为在html头中自己设置了metaname="viewport"...，

查看lib-flexble做了配置，默认会根据屏幕为我们添加头文件的，如果自行设置，那么只会进行修改设置的值而已，并不会再添加，所以导致data-dpr始终为1，所以把metaname="viewport"...去除.