html pt兼容,移动端 HTML 响应式布局之神奇的 pt(自测 99.99% 与设计图一致)

移动端 HTML 响应式布局之神奇的 pt(自测 99.99% 与设计图一致)

首先, 我本质上是一名 UI 设计师, 但对前端也是颇感兴趣, 很多静态页面及一些动画效果都由我来实现, 逻辑和数据部分交给其他程序大大, 我的攻略方向主要还是视觉上为主

我一直使用 pxemrem 单位作为移动端开发的常用计量单位, 不过时常还是要做一些媒体查询适配每个不同分辨率的手机

有时真的觉得挺麻烦, 就没有一种只需写一次就能完美适配所有手机的吗?

我好像发现了新大陆, 至于准不准确, 还要靠各位多测试, 反正我测过的 99.99% 准确

我们先在 ps 里建立一个 iPhone6 的画板, 分辨率是 750x1334px, 然后随便画一个矩形, 注意数值:

我特意取了一个偶数, 一个奇数, 来辨别 pt 这个单位的准确度

然后建立一个基本的移动端 html 结构,

meta 里通常情况下是写 < meta name="viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"">, 但这个方法只需写 content="user-scalable=0", 只让页面不让缩放, 这是关键

然后在样式表里我们不写 px, 我们直接根据 UI 上的 px 1:1 转成 pt 来写:*{margin:0;padding:0;}

body{background:blue;}

div{width:332pt;height:203pt;margin:114pt00337pt;background:red;}

这时会得出这样的结果

把浏览器渲染的图与 UI 设计图叠加对比看看结果

结果发现位置基本相同, 但浏览器渲染的红色矩形比 UI 里的黑色矩形大了一点点, 不过结果已经差不多出来了, 只要再调整一下即可!

既然 UI 里的画布宽是 750px, 那么如果我把页面写成宽是 750pt 会怎样呢?

750pt 在浏览器里渲染成 1000px 了

然后再看看 body 本身的宽度

原来如此! 750pt 本身已经超出画布的范围了, 那么是不是只要将 750pt 按照 body 的 100% 宽度换算一下就可以了呢? 我们再来测试一下

没错, 完美, 已经跟 body 的默认宽度一样是 980px 了!

通过测试确定 735pt 就是 980px,735/750=0.98, 按照这个结果, 就是将所有数值都乘以 0.98 即可, 我们再来测试一下:

div{width: 325.36pt; height: 198.94pt; margin: 111.72pt 0 0 330.26pt; background: red;}

嗯, 完美重合, 1 像素都不多!

但为了准确性, 我们再来看一下能否做到两个矩形通过固定数值达到水平布局并且宽度都是页面的 50%, 也就是说, 假如 UI 是 750px 宽, 那么 50% 宽应该是 375px, 换算成 pt 应该是 375*0.98=367.5pt,let's do it:

dt{width: 367.5pt; height: 367.5pt; float: left;}

OK, 真的完美实现 50% 宽, 而且浏览器也将 dt 的 367.5pt 渲染成 490px(980px/2)! 无论将浏览器渲染成 iphone 6 7 8 x 还是 plus 都成功!

根据这些结果, 我又拿了一些实际项目中的 UI 图来测试, 结果除了在文字上有一丁点位置偏差外, 其他基本也是与 UI 设计图一模一样

可能有童鞋会问, 每次都要乘 0.98 会不会很麻烦觉得麻烦的可以找一下 sublime text 有个大神写的插件叫 CSSrem-master, 这个插件是通过特定参数将 px 转换成 rem, 我利用这个插件改写了成 pt 模式, 马上就解决了这个问题

下面是 px 转 rem 这个插件的受用方法, 是不是很过瘾!?px 转 pt 同样也是这样, 把 rem 全部替换成 pt, 再在换算那里改写一下就 OK 了

不知道这个 px 转 pt 的方法算不算新大陆, 反正对我来说是的, 但有几点条件必须要满足:

meta 里通常情况下是写 < meta name="viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"">, 但这个方法只需写 content="user-scalable=0";

0.98 这个系数只适合在 UI 设计图为 750px 宽的画布 (即 iPhone6,@2x) 使用, 如果 UI 设计图为 640px, 请先转换为 750px;

文字不能保证 99.99% 与 UI 设计图一样, 但至少 90% 是一样的

至于这个方法可不可行, 有兴趣的童鞋可以尝试一下

但这里我有一个疑惑点, 为什么只要将浏览器变成手机模式, 无论是 iPhone6 还是 iPhone6 Plus,body 的默认宽度就是 980px 呢? 知道的童鞋麻烦请告诉一下我, 我就不去研究了

以前都是写 UI 相关的教程, 这是第一次写前端的文章, 写得不好或有错误请多交流, 谢谢!

来源: https://juejin.im/post/5a9a3bc6f265da237a4c7722