关于多屏适配的解决方案

很多面试会问到关于多屏适配的相关问题并且该怎么处理，同时要在不同DPR下显示的效果都一致，那么我们该怎么处理的他

很多人立刻想到了rem, 利用分别率进行处理。在不同的分辨率下进行处理。可是，大家又会想到了，怎样要对它不同分辩绿下，写css。那么效率来说，会不会很差。

当然对于大公司的来说，有强大的前端老大的带领下，有很好的封装好css. 那么处理起来很好办。直接用。可是对于小公司来说，设计师丢一个设计稿给你。然后

就要根据设计稿来写css

1 多屏适配的底下的图标，包括上下左右的图标一定要用字体形式表现出来。

2 flexible 多屏适配进行处理。前提是你的IDE 的字体要设置20px. 至于为什么，你自己百度。本人的是用HBulide内置的字体进行处理

(function flexible(window, document) {var docEl = document.documentElementvar dpr = window.devicePixelRatio || 1// adjust body font sizefunction setBodyFontSize() {if(document.body) {document.body.style.fontSize = (12 * dpr) + 'px'} else {document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();// set 1rem = viewWidth / 10function setRemUnit() {var rem = docEl.clientWidth / 10docEl.style.fontSize = rem + 'px'}setRemUnit()// reset rem unit on page resizewindow.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', function(e) {if(e.persisted) {setRemUnit()}})// detect 0.5px supportsif(dpr >= 2) {var fakeBody = document.createElement('body')var testElement = document.createElement('div')testElement.style.border = '.5px solid transparent'fakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if(testElement.offsetHeight === 1) {docEl.classList.add('hairlines')}docEl.removeChild(fakeBody)}
}(window, document))

3 关于轮播图的处理，建议是有vw

关于多屏适配的解决方案相关推荐

iOS 13.0 之 presentViewController 模态全屏适配解决方案
在iOS 13.0 之前,模态显示视图默认是全屏,但是iOS 13.0 之后,默认是Sheet卡片样式的非全屏,即: 之前,modalPresentationStyle值默认为:UIModalPres ...
web端大屏适配解决方案
背景:近期公司投放在展厅大屏中演示的大数据页面,出现了文字.图表.表格等多类组件显示错乱的情况. 目的解决页面错乱问题,实现多种分辨率的大屏适配入坑分析俗话说的好,走过的最多路,就是网友们套路 ...
Android 多屏适配解决方案
1.主流手机必要测量的参数(通过具体的方法,测量出,需要测试手机的下面的这些参数,我们主要使用的只是 screenwidth 这个参数,其他参数只是帮助我们更好的理解屏幕适配) DisplayM ...
移动端高清、多屏适配方案
2019独角兽企业重金招聘Python工程师标准>>> 背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件 ...
移动端开发高清效果和多屏适配
背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
移动端H5页面高清多屏适配方案
背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
H5|web移动前端自适应适配布局解决方案
方案: 固定一个某些宽度,使用一个模式,加上少许的媒体查询方案使用flexbox解决方案使用百分比加媒体查询使用rem 1. 简单问题简单解决我觉得有些web app并一定很复杂,比如拉勾网, ...
Android 系统（70）---Android刘海屏适配方案
Android刘海屏适配方案什么是刘海屏随着iPhone X发布,国内一些厂商也推出了刘海屏手机,即将发布的Android p也提供了对刘海屏的支持.so,我们的app也要提前做好适配. 屏幕的正 ...
vue怎么给pc端浏览器设置一个最小屏幕_图文讲解uni-app的PC宽屏适配方案
天下苦平台碎片化已久. 在移动互联网以前,开发者只需幸福的面对web.进入移动互联网时代,iOS.Android.H5以及各种小程序快应用层出不穷,开发者再也幸福不起来. 学习n个技术开发n个版本 ...

关于多屏适配的解决方案

关于多屏适配的解决方案相关推荐

最新文章

热门文章