css - h5页面设计稿640下20px,逻辑像素就是10px的字体
PHP中文网
PHP中文网 2017-04-17 13:57:57
[HTML讨论组]

h5页面设计稿640下20px,逻辑像素就是10px的字体,你们怎么写的呢?

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(5)
高洛峰

现在一般是出750的图吧?
根据各个尺寸的大小动态设置html根元素的font-size, 可以用媒体查询做,也可以js 做;
然后 rem 设置各个元素的相对单位就行了;
如果你用 sublime text ,装个rem 自动转换 px 的插件

PHP中文网

不追求刻意的低版本兼容的话可以尝试使用vw和rem配合做单位(caniuse上说的是兼容安卓4.4+,ios8+)
5vw意思是将整个宽度划分为100份取5份,设置给HTML标签的fontSize
1rem意思是相对于HTML标签fontSize的大小,也就是5vw
这样整体换算起来比较方便,而且使用vw和rem配合来的话完全不用担心设备屏幕大小

迷茫

移动端采用自适应布局,字体也使用相对单位,随屏幕大小改变。有些手机只能达到10像素等大小的字体,而有些浏览器又能支持更小像素的字体,这些都没有硬性的要求,按照自适应来说,是不会过于小的

PHP中文网

特别小的我直接transform:scale(0.8)类似这种的缩放

巴扎黑

可以设置 meta 标签初始缩放比例为 0.5 这样 20px 就会显示 10px 的大小
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号