84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
h5页面设计稿640下20px,逻辑像素就是10px的字体,你们怎么写的呢?
认证高级PHP讲师
现在一般是出750的图吧?根据各个尺寸的大小动态设置html根元素的font-size, 可以用媒体查询做,也可以js 做;然后 rem 设置各个元素的相对单位就行了;如果你用 sublime text ,装个rem 自动转换 px 的插件
不追求刻意的低版本兼容的话可以尝试使用vw和rem配合做单位(caniuse上说的是兼容安卓4.4+,ios8+)5vw意思是将整个宽度划分为100份取5份,设置给HTML标签的fontSize1rem意思是相对于HTML标签fontSize的大小,也就是5vw这样整体换算起来比较方便,而且使用vw和rem配合来的话完全不用担心设备屏幕大小
移动端采用自适应布局,字体也使用相对单位,随屏幕大小改变。有些手机只能达到10像素等大小的字体,而有些浏览器又能支持更小像素的字体,这些都没有硬性的要求,按照自适应来说,是不会过于小的
特别小的我直接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">
meta
0.5
20px
10px
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
楼上说的都很正确,所以针对这种复杂的情况,淘宝手机天猫团队发明了一套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...
chrome里设置一下最小字大小是10px就可以测试了
另外我用过的移动端适配的方案http://azq.space/2016/08/14/b...
现在一般是出750的图吧?
根据各个尺寸的大小动态设置html根元素的font-size, 可以用媒体查询做,也可以js 做;
然后 rem 设置各个元素的相对单位就行了;
如果你用 sublime text ,装个rem 自动转换 px 的插件
不追求刻意的低版本兼容的话可以尝试使用vw和rem配合做单位(caniuse上说的是兼容安卓4.4+,ios8+)
5vw意思是将整个宽度划分为100份取5份,设置给HTML标签的fontSize
1rem意思是相对于HTML标签fontSize的大小,也就是5vw
这样整体换算起来比较方便,而且使用vw和rem配合来的话完全不用担心设备屏幕大小
移动端采用自适应布局,字体也使用相对单位,随屏幕大小改变。有些手机只能达到10像素等大小的字体,而有些浏览器又能支持更小像素的字体,这些都没有硬性的要求,按照自适应来说,是不会过于小的
特别小的我直接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">
楼上说的都很正确,所以针对这种复杂的情况,淘宝手机天猫团队发明了一套JS组件
可以让你在代码中按照标准的设计稿的px去写样式,然后通过工具转换为rem
释放手机端的复杂度,一律按照像素切页面即可,适应任何手机(iPad),暂不支持PC
比如HTML,只需要加载
CSS
CSS中写的是实际的PX,比如720px,20px,通过工具转换为REM(支持Sublime、SASS、LESS),转换工具他们都有做,转换算法是:
详情具体请查看:https://github.com/amfe/artic...
chrome里设置一下最小字大小是10px就可以测试了
另外我用过的移动端适配的方案
http://azq.space/2016/08/14/b...