美文网首页
浅谈rem与rpx布局

浅谈rem与rpx布局

作者: 小Gui | 来源:发表于2018-06-01 15:51 被阅读0次

rem大家或许都比较熟悉,而rpx则是腾讯在公测小程序时所推崇;二者实质并无太大的区别,在很多的小白前端开发阶段会不懂为什么一些老前端在开发移动端过程中会出现部分地方不使用rem或者rpx而转用px,接下来谈谈我的看法:


一般开发中横向布局通常使用rem/rpx布局,纵向布局部分使用px

第一种情况

(适用于一行布局中多个元素布局)

浅谈rem与rpx布局

1. 这里以上图为例,因为每一台手机的屏幕横向的大小是固定的,如果使用px则可能在小屏幕出现位置不可控,导致内容换行错乱等问题。故使用rem/rpx单位布局。

2.而手机纵向的高度是无限延伸的,所以上下边距和边框等则可以使用px固定像数,这样不会对页面效果产生太大影响,而且也不用担心元素不可控错乱等问题。

第二种情况

(适用于一行中单元素或者左右两端的小型元素布局)

浅谈rem与rpx布局

1. 同样一上图为例,对于这样的单元素或者左右小元素,可以选择px固定尺寸,原因是当横行布局只有一个元素时根本不会产生错乱,因为屏幕的宽度远大于这点小元素的宽度,如果产生错乱则可以放弃该手机适配了(这种小屏幕早该淘汰了)。

2. 纵向布局原理与上面一致。


本文章仅代表个人开发观点,实际情况实际分析,如果还是不懂就记住一句话:发生错乱就必须使用rem或者rpx布局;围绕此观点就不会有错。如果有错误还望各位大师指出,这也是我第一次写文章,多多指教。

相关文章

  • 浅谈rem与rpx布局

    rem大家或许都比较熟悉,而rpx则是腾讯在公测小程序时所推崇;二者实质并无太大的区别,在很多的小白前端开发阶段会...

  • flex+rpx布局+高度自适应(当屏幕分辨率改变,页面自适应分

    1、flex和rpx的布局这里不做赘述(这里的rpx源于网页应用中的rem,是一个意思),可以直接下载代码体验效果...

  • rem的作用与运用,小程序为什么用rpx为单位

    开发过小程序的人都知道,小程序的单位是rpx,这是为什么?有什么作用呢,其实它源于rem布局,先来了解下rem的优...

  • 浅谈rem布局

    有这样一个面试题,在开发移动端的时候,拿到的设计稿的宽度是375px,如何实现rem和px的转换的。如果你觉得对r...

  • 小程序之WXSS

    WXSS和CSS区别有以下几个方面: 尺寸单位rpx 样式导入 内联样式 选择器 尺寸单位rpx rpx和rem相...

  • rpx和rem

    一、 rpx:全称“response pixel”,即响应式的px,rpx单位是微信小程序中css的尺寸单位,它可...

  • 移动端兼容

    rem与px的转换 flexible.js 布局详解 rem自适应布局的回顾总结 flexible.js如何实现r...

  • wxss和css的区别

    新增了rpx尺寸单位 css中需要手动进行像素单位换算,ps:rem wxss在底层支持新的尺寸单位rpx,在不同...

  • 苏宁易购项目

    rem布局 认识rem rem适配1.伸缩布局 flex2.流式布局 百分比3.响应布局 媒体查询 (超小...

  • 小程序: 三栏布局的五种实现方式及优缺点

    假设高度已知,请写出三栏布局,左栏、右栏宽度100rpx,中间宽度自适应。 间隔10rpx 浮动布局 浮动布局的优...

网友评论

      本文标题:浅谈rem与rpx布局

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