问

javascript - 问问大家在做移动端的时候适配的问题都是怎么处理的？

df0134330 发布于 2022-11-11 10:42

之前接手的大部分项目都是PC端的，就算有移动端的也会是一些布局相对来说比较简单点的。但是最近接手了一个移动端的项目，却在适配方面碰到了问题。

之前写移动端的页面的时候都会在页面的头部写一个meta标签，规定一下viewport,然后页面的单位采用rem和百分比的单位flex布局的方式去做适配。

但是最近碰到的项目，要求比较严格点。在一个有头像展示的地方我给img标签添加了一个固定的宽高，其他均采用rem和百分比，但是产品部这边说感觉页面整体有点偏胖。img标签的宽高是设计图里的实际大小，设计图的宽度是640。因我们不能在移动端上使用px单位，所以导致各个模块的具体与设计图之间有差别（通常来说差一点点是没关系的，但是产品部这边说感觉差别有点偏大让我再改改）。所以想问问大家平时在做移动端的项目的时候你们的适配是怎么做的？有没有比较好点的解决方案？今天也有看了看淘宝的移动端解决方案，但是感觉也有些差别，不知道是我没弄好还是怎么滴。。。。

8 个回答

有没有熟悉移动端的朋友呀，求解呀

2022-11-12 01:52 回答

壹滒_918
使用rem就可以了。

2022-11-12 01:52 回答

牛哥粉丝_对白
这个问题我感觉是产品没弄清楚设计在那些设备的效果，是他自己没能预想到吧。建议你找产品沟通，问清楚用户群主流使用哪些移动设备，然后再为那些设备的尺寸写优化吧，其他设备就用回自适应，淘宝的移动端解决方案已经很够用的了。

2022-11-12 01:52 回答

ColinYinbaohua
这是我在另一个问题下发的答案，希望有所帮助，手机转载不便见谅

【设计稿上的px,落实到前端开发的话，字体大小该设多少？】如果一张设计稿是640x1136,设计稿里的字体大小分别是18px,24px,33px。那么落实到前端写代码的时候，应该用多少px呢?如果用18px,24px,33px的话，在手机上看，会显得很大额。 -- 分享自SegmentFault 原文链接:https://segmentfault.com/q/10...

看起来是 iPhone 5 的分辨率，那么需要一次逻辑分辨率的转换。

iPhone 5 的逻辑分辨率为 320 X 568，所以如果需要像素级还原，需要将设计的设计稿缩放为 320 X 568，然后再按照缩放后的尺寸进行开发，可以直接写像素尺寸。

如果不想在样式表中用像素的话，比如用 rem，那么只需要在样式表预处理语言中定义一个 $rootFontSize，然后将 $rootFontSize 设置在 html 标签上，之后所有的尺寸都可以使用 (逻辑分辨率设计稿上的尺寸 / $rootFontSize)rem，一般通过定义一个函数进行，比如：
```
$rootFontSize = 12px

size(px)
  (px / $rootFontSize)rem

html
  font-size: $rootFontSize

.something-is-200px-in-design
  width: size(200px)
```
2022-11-12 01:52 回答

mobiledu2502922357
一般来说，我们需要关注的是：字体、高宽间距、图像（图标、图片），固定高度，宽度自适应，字体用rem,不同的手机和分辨率用@mediacha查询去做判断，比如，手机分辨率为a时，用a1;分辨率为b,时用b2;

2022-11-12 01:52 回答

Christy-1221
用媒体查询@media和所对应的手机分辨率大小来控制对应的样式呀

2022-11-12 01:52 回答

BELLICOSE牛仔
用媒体查询解决啊

2022-11-12 01:52 回答

cindy蔡79
这里收集了移动端开发所需要的一些资源与小技巧我想你可能用的上
https://github.com/jtyjty9999...

2022-11-12 01:52 回答

小HuLkfz_264

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签