如何进行PC端多屏适配

多屏适配的几种方法：

使用媒体查询，如 bootstrap等框架
制作设计图的时候，给一个固定的宽度，如1200，背景使用纯色，或者大背景图
使用rem
其他

这里介绍一下 rem 适配方案：

能够流畅的适配不同分辨率的屏幕，并且开发效率跟使用px开发没什么区别，只是多了将px转化成rem的css函数

效果图如下（可以看到在不同的分辨率下，依然可以保持较好的布局）：

使用上述方案的步骤：

根据设计稿算出 px转化成rem 的缩放比（这里我的设计稿是 1920px，然后上面导航栏的字体大小为34px，所以都以这个为基准，算出缩放比为 56.47，然后反过来除就等于导航栏字体大小，其他的图片、文字、div都按照这个去算，不懂得自己动手敲一遍，然后使用px的地方用这个函数代替就好了，这里使用的是 scss）
```
$ratio: 1920 / 56.47; // 缩放比   34// 返回对应屏幕下的rem值
@function px2rem($px){@return $px / $ratio + rem
}
```
样式书写如下（ px2rem(70) 等于 1920px屏幕下的70px）：
```
  .title {position: absolute;top: px2rem(70);color: $title-color;font-size: $font-size-title;}
```

再在html页面加上如下js代码，监听resize事件，动态设置 rem 中根字体的大小，那么使用rem的元素会根据根字体的大小变化而变化。

    <script>// 获取当前设备的宽度，设置rem的根字体大小let width = window.innerWidthwidth = width <= 1200 ? 1200 : widthconst htmlObj = document.getElementsByTagName('html')[0]htmlObj.style.fontSize = width / 56.47 + 'px'// 对resize事件进行浏览器兼容处理if(document.createEvent) {var event = document.createEvent("HTMLEvents");event.initEvent("resize", true, true);window.dispatchEvent(event);} else if(document.createEventObject) {window.fireEvent("onresize");}// 监听页面resize事件，重新设置rem的根字体大小window.onresize = function() {let width = window.innerWidthwidth = width <= 1200 ? 1200 : widthhtmlObj.style.fontSize = width / 56.47 + 'px'};</script>

如何进行PC端多屏适配相关推荐

pc端不同分辨率适配
1.以1920* 1080的设计稿为例,实现PC端不同分辨率适配 2.安装依赖 npm install --save lib-flexible 或者 yarn add lib-flexibl ...
移动端页面制作字号大小设定问题,设计稿文字字号规范,解决移动端大小屏适配问题
移动端页面制作字号大小设定问题,设计稿文字字号规范,解决移动端大小屏适配问题参考文章: (1)移动端页面制作字号大小设定问题,设计稿文字字号规范,解决移动端大小屏适配问题 (2)https://ww ...
cocos creator屏幕适配fitHeight / fitWidth，手机端竖屏，pc端浏览器适配，pc分辨率全屏适配，血条跟随的适配
一,使用creator3.3.2 分别实现手机端和浏览器的适配效果如下打包web-mobile(居然会有这种需求 /流汗!) pc浏览器显示手机端显示 1.首先在项目中设置分辨率和默认适配这里 ...
cocos creator开发pc端的浏览器适配问题
因为pc浏览器端不比手机端,手机分辨率除了ipad等特别的,一般只需要把背景图拉宽或者拉高一些,就能保证不留黑边,pc端浏览器可以随便拉,但是一般为了效果,浏览器界面再拉也不允许留黑边的,可以试试其他 ...
移动/PC端的一些适配方案
一.多种屏幕(响应式) 响应式是一种在多种设备(比如pc端移动端)不同分辨率情况下使界面展现最大程度适应尺寸的手段.响应式包含了移动端适配,也可以使移动端不同分辨率展现不同样式.移动端适配则相对精准 ...
android Pc端截屏方法
昨晚意外的发现在PC端进行截屏的方法相当多,在android sdk的tools里面有大量的jar包可以利用. 第一种方法: 这里使用AndroidDebugBridge及其相关类进行截屏,使用的 ...
vue+antd搭建后台管理界面模版（PC端），适配中文、英文、日文 mock数据，开箱即用
vue+antd搭建后台管理界面模版(PC端) 完整代码下载地址:vue+antd搭建后台管理界面模版(PC端) 技术栈 vue2 + vuex + vue-router + webpack + ES ...
web端大屏适配解决方案
背景:近期公司投放在展厅大屏中演示的大数据页面,出现了文字.图表.表格等多类组件显示错乱的情况. 目的解决页面错乱问题,实现多种分辨率的大屏适配入坑分析俗话说的好,走过的最多路,就是网友们套路 ...
vue中pc端大屏怎么进行rem适配（lib-flexible + postcss-pxtorem）
使用插件 lib-flexible 和 postcss-pxtorem 进行是适配,一共是两个步骤,当我们在进行适配的时候,如果只将当前屏幕分成几份的话,那么在后面写样式的时候,样式的单位需要写成r ...

如何进行PC端多屏适配

如何进行PC端多屏适配

多屏适配的几种方法：

使用上述方案的步骤：

如何进行PC端多屏适配相关推荐

最新文章

热门文章