zoukankan      html  css  js  c++  java
  • 关于rem

    关于手机端字体设置的rem怎么定义

    css格式化文件reset.css中加入:
    @media screen and (max- 750px){ html{font-size:30px;} }
    @media screen and (min-640px) and (max-749px){ html{font-size:25px; } }
    @media screen and (min-480px) and (max-639px){ html{font-size:20px; } }
    @media screen and (min-320px) and (max-479px){ html{font-size:15px; } }
    
    根据不同尺寸的屏幕,去定义html级的单位字体大小,在PSD转换制作页面的时候,基本的手机端PSD的尺寸为750*1335,对照下来的尺寸也就是1rem=30px,在制作时掌握好计算尺寸就基本能解决这些问题了。
    手机端的高度可以固定,宽度能用百分比来表示,就不要用rem去固定,必要的固定宽度的,就用rem固定,像一些按钮,基本都是用百分比去表示宽度的,像一些固定宽度的图标就用rem去固定。
    在页面中优先写出媒体查询的标签
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    举例下面三款老年机
    设备名称 分辨率 估算字体大小 rem与px转换
    iphone5 320568 font-size:12px; 1rem=12px
    iphone6 375667 font-size:14px; 1rem=14px
    iphone6 Plus 414*736 font-size:16px; 1rem=16px
    
    html,body{ height: 100%; margin: 0; padding: 0; font-size: 14px;}//注意初始样式必须写在最顶部!!!!如果写在媒体查询底部的话就会覆盖上方的媒体查询(因为是层叠样式表嘛~)
    @media screen and (max-320px ) { html{font-size: 12px;} }
    @media screen and (min-321px) and (max-750px ) { html{font-size: 14px;} }
    @media screen and (min-751px ) { html{font-size: 16px;}







    unction rem() { var w = Math.min(document.documentElement.getBoundingClientRect().width, 500); document.getElementsByTagName('html')[0].style.fontSize = w * 100 / 320 + 'px'; } rem(); window.onresize = function() { rem(); };
     
     
     
     
     
    至于为什么js中要用w*100 / 320呢 这个320 是因为我们美工给我的图都是按照5s的标准来做的,就是320px,当然图都是640px的,所以我就除以的320,如果美工给你的图是375*2的 那么你就需要把320换成375,因为这样你在图里量出的div的宽度才能符合。
     
    很多高度问题因为比例的换算,到最后整个页面变形。后期问题太多,果断换了media调整整个项目尺寸。





    使用rem应注意什么?
     1)做出来的效果与效果图有些许偏差。
    为什么会出现这个原因呢?这是因为浏览器对小数数值的处理各不相同导致。不同浏览器计算rem转换为px数值时,对于小数点后的数值的处理是有所偏差,rem计算偏差的根源是浏览器内核数字类型的区别,如果浏览器的内核数字类型是float类型,能够较好地支持有小数点的数值。当浏览器内核数字类型是int类型,不支持小数点,会对数字进行四舍五入,这样就会有偏差。如果元素越大偏差得就越明显!这个坑几乎无法避免,只能让他更好的适应最多的浏览器。比如chroem内核。
     
    2)雪碧图定位问题
    rem的换算成px的尺寸非严格精确,如果雪碧图图标之间的距离过小,就可能导致图标过界,因此图与图之间的间隙需要留相应大一点。
     
    3)rem单位最好不用在PC端
    因为pc端有的浏览器不识别12以下的字体
    性能、GUP加速、技术选型等)才能做出用户体验超好的web页面,还有,rem也并不是万能的,也有一些场景是不适于使用rem的,比如 当用作图片或者一些不能缩放的展示时,必须要使用固定的px值,因为缩放可能会导致图片压缩变形等。

    -------------------整理于yingxiang 20190218
  • 相关阅读:
    Mozilla Prism v0.9 For Windows/Linux/Mac
    Firefox 3.0十大年夜新特征(1)
    刊行版:Epidemic GNU/Linux 2.1发布
    斥地版:Red Hat Enterprise Linux 4.7 Beta公布公布
    linux下安装drcom1.3.7心得
    Oracle老手艺对Linux意味着什么?
    学Linux要火山式的驾御还是垂垂来
    Firefox 3.0 RC2本周颁发
    net命令详解 **net accounts /maxpwage:unlimited
    学习官方示例 TApplication.OnDeactivate
  • 原文地址:https://www.cnblogs.com/522040-m/p/10397019.html
Copyright © 2011-2022 走看看