美文网首页CSS相关技术文章
使用rem单位注意以下几点

使用rem单位注意以下几点

作者: 愿你如夏日清凉的风 | 来源:发表于2018-01-18 20:13 被阅读110次

1、在所有的单位中,font-size推荐使用px,然后结合媒体查询进行重要节点的控制,这样可以满足突出或者弱化某些字体的需求,而非整体调整。
2、纵向的单位可以全部使用px,横向的使用rem,因为移动设备宽度有限,而高度可以无限向下滑动。但这也有特例,比如对于一些活动注册页面,需要在一屏幕内完全显示,没有下拉,这时候所有纵向或者横向都应该使用rem作为单位。如图:


WechatIMG469.jpeg

左图的表单高度单位由于下边空距较大,使用px在不同屏幕显示更加;而右边的活动注册页由于不能出现滚动条,所有的纵向高度、margin、padding都应该使用rem。
3、border、box-shadow、border-radius等一些效果应该使用px作为单位。

相关文章

  • 使用rem单位注意以下几点

    1、在所有的单位中,font-size推荐使用px,然后结合媒体查询进行重要节点的控制,这样可以满足突出或者弱化某...

  • vue3移动端自适应配置

    注意:项目中使用rem为单位 安装postcss-px2rem 配置postcss-px2rem //vue.co...

  • 移动屏幕适配方案

    1,使用rem+媒体查询实现 2,使用rem+js实现 3,使用rem+vw实现 rem是什么是一个相对单位参照根...

  • 使app端可适应不同分辨率大小

    css中单位同一使用rem

  • vue px2rem

    vue ,使用rem单位,可在不同屏幕上完美显示相同的布局。px2rem 插件方便的将px单位转为了rem。 px...

  • Appcan兼容bootstrap

    Appcan开发中使用bootstrap,若不兼容,可能是使用rem布局造成,去掉body限制,改rem单位为px...

  • Vue 使用lib-flexible适配PC端(rem)

    安装lib-flexible与postcss-px2rem 代码直接使用rem单位不方便阅读,安装postcss-...

  • umi开启hd后配置 px2rem

    为实现不同大小分辨率效果基本一样。 开启高清hd即使用rem单位,会自动把项目中的所有px单位转换为rem单位,并...

  • 面试题及答案

    1、文字超出显示为省略号 2.div垂直居中 rem 单位如何转换为像素值 当使用 rem 单位,他们转化为像素大...

  • 手机屏幕适配方案 ( REM )

    REM 简介 rem 是屏幕适配中得到重用的长度单位。使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等...

网友评论

    本文标题:使用rem单位注意以下几点

    本文链接:https://www.haomeiwen.com/subject/hzxgoxtx.html