移动端布局单位

最新推荐文章于 2024-04-20 16:45:00 发布
最新推荐文章于 2024-04-20 16:45:00 发布
阅读量1.7k 收藏 2
点赞数
分类专栏： CSS 文章标签： 布局 css 移动 响应式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_31231955/article/details/78166915
版权

　　移动端设备种类繁多，需要适配多种情况的响应式布局来保证美观的页面实现，先来解释容易弄混的多个名词。

  • PPI

    单位英寸像素数

  • DPR

    设备像素比： 设备像素 / CSS像素(某一方向上)

  • DPI

    Dpi（每平方英寸像素数目）：图像细节程度的度量

    建议看一下知识小科普！像素英寸与DPI的那些事儿

  • 单位：
    　　 - em

    em是相对长度单位。相对于当前对象内文本的font-size(即父元素尺寸)。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

    　　 - rem

    　“font size of the root element (根元素的字体大小)”— W3C官网

    　　也就是说1rem就等于<html>

最低0.47元/天 解锁文章
cicistream
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端常用单位：px、%、vh、vw、em、rem
qq_44718039的博客
06-22 1868
css长度单位
h5移动端仿钉钉组织架构的选择部门功能
12-02
博客地址https://blog.csdn.net/weixin_44484452/article/details/121638096?spm=1001.2014.3001.5501 本资源比博客的补充了顶部面包屑功能
响应式设计与移动端适配：从REM到vw/vh单位的实践
最新发布
偏执的小男孩儿
04-20 192
响应式设计与移动端适配：从REM到vw/vh单位的实践
移动端布局中的常用单位
wu67321的博客
06-01 509
rem单位 一般来说，设计图测量出来是多少，就除以100+rem单位。例如：88px 可以写成 .88rem 注意：可以通过安装px2rem快捷使用，否则需要引入js代码。 vw单位 逐渐流行的移动端布局单位。和rem同理，设计图量出来是多少，除以7.5+vw单位。但由于不好计算，通过安装px2vw插件。优势在于不用引入js代码。从而优化网页打开速度，给用户带来更好的体验。注意：vw单位依靠vw，不需要使用vh单位。 ...
移动端视口、px、rpx
weixin_45985175的博客
07-31 1110
1、现状 移动端设备屏幕尺寸非常多，碎片化严重。Android设备有多种分辨率：480x800, 480x854等。作为开发者无需关注这些分辨率，因为常用的尺寸单位是 px 。 移动端浏览器我们主要对webkit内核进行兼容，我们现在开发的移动端主要针对手机端开发。 2、视口 视口就是浏览器显示页面内容的屏幕区域 视口分为布局视口、视觉视口和理想视口 我们移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽 想要理想视口，我们需要给我们的移动端页面添加 meta视口标 2.1 布局视口
移动端页面单位的选择(px em rem)
三七二十一的博客
03-27 2137
移动端页面单位的选择(px em rem)绝对单位:  px相对单位:  rem  em em具有继承性  继承自直接父类  所以说在移动端很少用浏览器默认的字体大小 16px  那么 1em=16pxrem 有一个统一的标准  它继承自html   默认是16px=1rem可以给html的字体大小设置为10px    html{ font-size: 10px; }        10px=1...
Web移动端布局那些事
09-27
本篇文章主要介绍了Web移动端布局中的一些关键知识点，包括单位的选择、`<meta>`标签中的`viewport`布局、弹性布局（Flexbox）以及在实际应用中可能遇到的问题。 一、单位 在移动端布局中，px单位由于不能很好地...
详解H5 活动页之移动端 REM 布局适配方法
09-27
本文将深入探讨移动端REM布局的适配方法，这是H5活动页实现响应式设计的关键技术。 首先，我们需要理解什么是REM（Root EM）。REM是一个相对于根元素（通常是html元素）font-size的长度单位。这意味着，如果我们...
如何利用vw+rem进行移动端布局
11-20
你还在用rem弹性布局吗？在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹 简单介绍下rem布局方案 rem是css中的长度单位，1rem=根元素html的font-size值。当页面中所有...
rem:移动端rem布局
05-09
移动端rem布局rem：相对长度单位。相对于根元素(即html元素)font-size计算值的倍数 ./js/rem.js中 默认设计稿宽度为640 1rem =100px 可自行修改HOW TO USE设置移动端网页专用的viewport meta，至少需要包含width=...
canvas 单位问题 类似rem和rpx自适应手机屏幕宽度
powderhose的博客
07-05 7035
//获取屏幕的宽度 var clientWidth = document.documentElement.clientWidth; //根据设计图中的canvas画布的占比进行设置 var canvasWidth = Math.floor(clientWidth*200/720); canvas.setAttribute('width',canvasWidth+'px'); canvas.set
移动端rem布局与传统px布局单位
Abe涛的博客
10-22 282
1
移动端布局单位 vw+rem、rem+js、vw
zyqgt960812的博客
09-27 951
根据CSS3规范,视口单位主要包括以下4个: vw : 1vw 等于视口宽度的1% vh : 1vh 等于视口高度的1% vmin : 选取 vw 和 vh 中最小的那个 vmax : 选取 vw 和 vh 中最大的那个 用视口单位度量，视口宽度为100vw，高度为100vh（左侧为竖屏情况，右侧为横屏情况） 例如，在桌面端浏览器视口尺寸为650px，那么 1vw = 650 * 1% = 6....
移动端常用单位
qq_34771938的博客
10-10 667
px / % / em /rem / vw / vh* / 1. px 2. % 3. em 1em = 1 * font-size, 5em = 5 * font-size 如果自身有 font-size 的话以自身为准，如果自身 font-size 就是以 em 为单位或者没有 font-size 的话，就会从父容器继承。 em 不经常使用，但是有时也会比较好用，如：字符缩进。 4. rem rem 是 root 根元素的 font-size ，即 html 元素的 font-s
理解html移动端开发屏幕适配问题（包括小程序）
jinchao_zhang的博客
11-08 1440
一、小程序 规定屏幕宽度为20rem；1rem = (750/20)rpx ； 一行750rpx ； 1rpx = 0.5px ； 基于iPhone6 的设计稿，实际屏幕375px ； 基于iphone4或者iphone5，实际屏幕宽度340px=640rpx，根据设计情况计算 rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
rem自适应移动端布局
wimenlo的前端博客
12-10 3838
现在的移动终端 以前，实现移动端适配的时候，我使用CSS3 @media 监测视口宽度，根据不同宽度实现不同的布局，从而实现一套CSS适配所有终端（PC，移动）。虽说听起来很方便，但实际上工作量也是相当多的，那有什么方法可以更简单地去适配移动端呢？
html5 Canvas 如何自适应屏幕大小
热门推荐
just try
09-09 2万+
但是这样创建出的画布不能随着浏览器窗口大小的改变而动态的改变画布的大小。而这一点往往又非常重要， 因为我们会经常改变浏览器窗口大小，不会一直保持某个固定的大小。  html代码 canvas width="300" height="300" id="myCanvas">canvas> 设置样式 * { margin: 0; padding: 0; } html,body{
移动端布局以及相关单位
weixin_30496751的博客
05-09 168
之前做了很多移动端布局，今天为大家总结一些经验。 一. viewport 如今可以绝大部分浏览器里（即主流的安卓浏览器和ios），都支持对viewport的一个控制了。一般的，我们会这么写。 viewport默认有6个属性 width: 设置viewport的宽度（即之前所提及到的，浏览器的宽度详），这里可以为一个整数，又或者是字符串"width-device" initial...
移动端自适应布局 rem
09-01
移动端自适应布局 rem 是一种相对单位，它是相对于根元素(html标签)的字体大小来计算长度的。通过给根元素设置一个基准字体大小（一般是10px），然后使用rem作为其他元素的长度单位，可以使页面中的元素按照比例自适应不同屏幕大小。 为了实现移动端自适应布局，我们可以按照以下步骤进行操作： 1. 设置根元素(html)的字体大小为10px或其他适当的基准值。可以使用CSS的媒体查询来针对不同屏幕大小设置不同的根元素字体大小。 2. 在CSS中使用rem作为长度单位，来指定元素的尺寸。例如，如果想要一个元素的宽度为屏幕宽度的一半，可以将其宽度设置为50rem。 3. 维护一个标准的设计稿尺寸（一般是750px或其他宽度）。在设计稿中的尺寸除以基准字体大小（例如10px）即为对应的rem值。 4. 使用JavaScript来动态计算根元素的字体大小，以适应不同屏幕大小。可以通过监听屏幕大小变化事件，然后根据不同的屏幕尺寸动态改变根元素的字体大小。 通过使用rem单位，我们可以使页面中的元素随着屏幕的变化而自适应调整大小，从而在不同设备上呈现良好的布局效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值