css - h5页面设计稿640下20px,逻辑像素就是10px的字体

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

楼上说的都很正确，所以针对这种复杂的情况，淘宝手机天猫团队发明了一套JS组件

可以让你在代码中按照标准的设计稿的px去写样式，然后通过工具转换为rem

释放手机端的复杂度，一律按照像素切页面即可，适应任何手机（iPad），暂不支持PC

比如HTML，只需要加载

<meta name="flexible" content="initial-dpr=2,maximum-dpr=2" />
<script src="flexible.js"></script>

CSS

.banner { height: 1.388889rem; display: block; border-bottom:1px #ccc solid; margin-bottom:0.138889rem; font-size:0.333333rem;line-height: 1.388889rem; color:#999;text-align: center;}
.banner .col-2:first-child{font-size: 0.416667rem;color:#50b5eb; text-decoration: underline;}

CSS中写的是实际的PX，比如720px，20px，通过工具转换为REM（支持Sublime、SASS、LESS），转换工具他们都有做，转换算法是：

rem = 你定义的px / (设计稿宽度px / 10)

rem = 20px / 64px

详情具体请查看：https://github.com/amfe/artic...

Answer 7

chrome里设置一下最小字大小是10px就可以测试了

另外我用过的移动端适配的方案
http://azq.space/2016/08/14/b...