字节跳动面试官：你了解过移动端适配吗？，android系统工程师面试题

最新推荐文章于 2024-05-03 17:17:43 发布

m_v_648374雨馨

最新推荐文章于 2024-05-03 17:17:43 发布

阅读量481

点赞数 3

分类专栏： 2024年程序员学习文章标签： android

本文链接：https://blog.csdn.net/m0_57509491/article/details/136914699

版权

2024年程序员学习专栏收录该内容

256 篇文章 0 订阅

订阅专栏

文章讨论了CSS中针对不同设备像素比的媒体查询解决方案，重点介绍了rem单位和vwvh单位的使用，以及如何通过viewportmeta标签配置视口。同时提到rem适配方案如flexible的原理和vwvh在工程化中的应用，以及postcss-px-to-viewport插件的作用。

摘要由CSDN通过智能技术生成

div {

height:1px;

background:#000;

-webkit-transform: scaleY(0.5);

-webkit-transform-origin:0 0;

overflow: hidden;

}

css根据设备像素比媒体查询后的解决方案

/* 2倍屏 */

@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {

.border-bottom::after {

-webkit-transform: scaleY(0.5);

transform: scaleY(0.5);

}

/* 3倍屏 */

@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {

.border-bottom::after {

-webkit-transform: scaleY(0.33);

transform: scaleY(0.33);

}

如此，完美的解决一像素看着粗的问题

如何适配

====

viewport

视口(viewport)代表当前可见的计算机图形区域。在Web浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的UI，菜单栏等——即指你正在浏览的文档的那一部分。

那么在移动端如何配置视口呢？简单的一个meta标签即可！

他们分别什么含义呢？

我们在移动端视口要想视觉效果和体验好，那么我们的视口宽度必去无限接近理想视口

理想视口：一般来讲，这个视口其实不是真是存在的，它对设备来说是一个最理想布局视口尺寸，在用户不进行手动缩放的情况下，可以将页面理想地展示。那么所谓的理想宽度就是浏览器（屏幕）的宽度了。

于是上述的meta设置，就是我们的理想设置，他规定了我们的视口宽度为屏幕宽度，初始缩放比例为1，就是初始时候我们的视觉视口就是理想视口！

其中user-scalable设置为no 可以解决移动端点击事件延迟问题（拓展）

解决适配方法

1、rem适配

rem是CSS3新增的一个相对单位，这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小

举个例子：

//假设我给根元素的大小设置为14px

html{

font-size：14px

}

//那么我底下的p标签如果想要也是14像素

font-size:1rem

}

//如此即可

rem的布局不得不提flexible，flexible方案是阿里早期开源的一个移动端适配解决方案，引用flexible后，我们在页面上统一使用rem来布局。

他的原理非常简单

// set 1rem = viewWidth / 10

function setRemUnit () {

var rem = docEl.clientWidth / 10

docEl.style.fontSize = rem + ‘px’

}

setRemUnit();

rem 是相对于html节点的font-size来做计算的。所以在页面初始话的时候给根元素设置一个font-size，接下来的元素就根据rem来布局，这样就可以保证在页面大小变化时，布局可以自适应，

如此我们只需要给设计稿的px转换成对应的rem单位即可

当然，这个方案只是个过渡方案，为什么说是过渡方案

因为当年viewport在低版本安卓设备上还有兼容问题，而vw，vh还没能实现所有浏览器兼容，所以flexible方案用rem来模拟vmin来实现在不同设备等比缩放的“通用”方案，之所以说是通用方案，是因为这个他这个根据设备大小去判断页面的方案是根据屏幕大小去百分百还原设计稿，从而让人看到的大小效果是一样的，但是苹果5 和苹果6p虽然看到的设计稿还原是一样的，但是他在一个合适距离上看到的效果能一样吗，本质上，用户使用更大的屏幕，是想看到更多的内容，而不是更大的字。

so，这个用缩放来解决问题的方案是个过渡方案，注定时代所淘汰

2、vw，vh布局

vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。

vh和vw方案和rem类似也是相当麻烦需要做单位转化，而且px转换成vw不一定能完全整除，因此有一定的像素差。

不过在工程化的今天，webpack解析css 的时候用postcss-loader 有个postcss-px-to-viewport能自动实现px到vw的转化

{

loader: ‘postcss-loader’,

options: {

plugins: ()=>[

require(‘autoprefixer’)({

browsers: [‘last 5 versions’]

}),

require(‘postcss-px-to-viewport’)({

面试复习笔记：

这份资料我从春招开始，就会将各博客、论坛。网站上等优质的Android开发中高级面试题收集起来，然后全网寻找最优的解答方案。每一道面试题都是百分百的大厂面经真题+最优解答。包知识脉络 + 诸多细节。
节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习。
给文章留个小赞，就可以免费领取啦~

戳我领取：GitHub

《960页Android开发笔记》