移动端 - CSS使用的尺寸与设计稿（PSD）保持一致

布满荆棘的人生 2022-05-27 04:57 184阅读 0赞

### 文章目录 ###

*  像素概念
 *  CSS中使用的尺寸与设计稿(PSD)保持一致

> [https://wildye.cn/posts/d1676c71/][https_wildye.cn_posts_d1676c71]

# 像素概念 #

*  **物理像素 ( physical pixel )**  
    物理分辨率就是硬件固有的分辨率，是屏幕上最小的物理显示单元
 *  **设备无关像素 ( 逻辑像素 )**  
    逻辑分辨率是通过算法达到的，实际显示(用户所见)的分辨率

# CSS中使用的尺寸与设计稿(PSD)保持一致 #

*  **原理**  
    将页面宽度固定为屏幕宽度，通过设置根元素 html 的 font-size 与使用 rem 来实现尺寸与设计稿一致

先拿设计稿竖着的横向分辨率除以100得到body元素的宽度：  
如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem

// 获取设备宽度 var deviceWidth = document.documentElement.clientWidth; // html的font-size始终等于横向分辨率/body元素宽 if(deviceWidth > 640) deviceWidth = 640; // 设置html的font-size = 设备宽度 ÷ (设计稿宽度 ÷ 参考像素) document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

CSS尺寸 = PSD尺寸/100

> 引用参考  
> [移动前端自适应适配布局解决方案和比较][Link 1]  
> [移动端web页面知识小结之像素、物理像素、逻辑像素][web]

[https_wildye.cn_posts_d1676c71]: https://wildye.cn/posts/d1676c71/
[Link 1]: http://caibaojian.com/mobile-responsive-example.html
[web]: https://blog.csdn.net/aiolos1111/article/details/51880223

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关设计稿常见尺寸宽度

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

àì夳堔傛蜴生んèń/ 2023年01月11日 09:12/ 0 赞/ 107 阅读

相关 Vue移动端尺寸适配

安装依赖包 > npm install amfe-flexible > npm install postcss-px2rem 在项目入口文件main.js中引入l

忘是亡心i/ 2022年12月18日 14:55/ 0 赞/ 181 阅读

相关移动端尺寸基础知识

本文转载地址：[http://colachan.com/post/3435 ][http_colachan.com_post_3435] 初涉移动端设计和开发的

àì夳堔傛蜴生んèń/ 2022年08月08日 05:12/ 0 赞/ 173 阅读

相关移动端尺寸基础知识

初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起，理清关于尺寸的所

￡神魔★判官ぃ/ 2022年06月18日 11:08/ 0 赞/ 197 阅读

相关移动端 - CSS使用的尺寸与设计稿（PSD）保持一致

文章目录像素概念 CSS中使用的尺寸与设计稿(PSD)保持一致 > [https://wildye.cn/posts/d1676c71/][https_w

布满荆棘的人生/ 2022年05月27日 04:57/ 0 赞/ 185 阅读

相关真的，移动端尺寸自适应与dpr无关

前言做移动端自适应时可能很多人都对自适应和dpr之间的关系产生疑问,也有一些人会疑虑比如我的自适应方案没有加dpr会不会出问题,针对这些疑问我说一下我的见解,希望能解除

àì夳堔傛蜴生んèń/ 2022年05月21日 07:44/ 0 赞/ 184 阅读

相关 android移动端与服务端通信保持Session会话

移动端在向服务器请求登录并且登录成功的时候，服务器的订单接口需要获取当前登录的Session，才能够以当前用户身份下单，与web端不同，移动端的Session不会自动保存到we

本是古典何须时尚/ 2022年05月18日 02:46/ 0 赞/ 155 阅读

相关移动端屏幕尺寸

/智能手机/ @media screen and (max-width:480px) { footer img { width: 20%;

我不是女神ヾ/ 2022年04月08日 09:12/ 0 赞/ 261 阅读

相关移动端添加视频与音频及尺寸自适应

1、视频尺寸自适应：视频代码添加以下样式： height: auto;width: 100%;display: block; width设置100%，就能达到

浅浅的花香味﹌/ 2022年02月17日 08:00/ 0 赞/ 198 阅读

相关移动端H5页面的设计稿尺寸大小规范

当我们在做手机端H5网页设计稿时（当然包含微信端的H5网页设计），如果没有做过类似的移动端的设计，UI设计师和前端工程师肯定会纠结的。如果是app设计师，就不会那么纠结啦。

Myth丶恋晨/ 2021年11月10日 12:48/ 0 赞/ 275 阅读