文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS 尺寸单位概述

如果值是一个数字（如 line-height：1.3），行高就是font-size与乘数的乘积，以像素为单位。...如果值是一个百分比，那么line-height的计算值就是百分比值乘以计算出的字体大小（以像素为单位）。...每个概念视口都有一组相应的视口单位。UA 默认视口单位包括 vw、vh、vmin 和 vmax。大视口、小视口和动态视口单位遵循类似的命名规则，前缀为 l、s 或 d，即 lvw 或 dvmin。...如果 UA 默认视口为 390px x 844px，那么指定的 10vmin 值就会变成 39 像素的使用值（或 390 的 10%）。...同样，*vmax 单位也是按照 *vw 或 *vh 中较大者的比例计算的。对于 390px x 844px 的视口，10vmax 的指定值将转化为 84.4 像素的使用值。

25510

关于移动端适配，你必须要知道的

iOS的尺寸单位为 pt， Android的尺寸单位为 dp， ReactNative中没有指定明确的单位，它们其实都是设备独立像素 dp。...所以，当页面缩放比例为 100%时， CSS像素=设备独立像素， 理想视口=视觉视口。 我们可以通过调用 screen.width/height来获取理想视口大小。...，我们来看看它们的具体含义： Value| 可能值| 描述 -|-|- width| 正整数或 device-width | 以 pixels（像素）为单位， 定义布局视口的宽度。...height| 正整数或 device-height | 以 pixels（像素）为单位， 定义布局视口的高度。 initial-scale| 0.0-10.0|定义页面初始缩放比率。...以 iPhone6为例：布局视口为 375px，则 1rem=37.5px，这时 UI给定一个元素的宽为 75px（设备独立像素），我们只需要将它设置为 75/37.5=2rem。

2K10
您找到你想要的搜索结果了吗？
是的
没有找到

关于移动端适配，你必须要知道的

iOS的尺寸单位为 pt， Android的尺寸单位为 dp， ReactNative中没有指定明确的单位，它们其实都是设备独立像素 dp。...所以，当页面缩放比例为 100%时， CSS像素=设备独立像素， 理想视口=视觉视口。 我们可以通过调用 screen.width/height来获取理想视口大小。...，我们来看看它们的具体含义： Value| 可能值| 描述 -|-|- width| 正整数或 device-width | 以 pixels（像素）为单位， 定义布局视口的宽度。...height| 正整数或 device-height | 以 pixels（像素）为单位， 定义布局视口的高度。 initial-scale| 0.0-10.0|定义页面初始缩放比率。...以 iPhone6为例：布局视口为 375px，则 1rem=37.5px，这时 UI给定一个元素的宽为 75px（设备独立像素），我们只需要将它设置为 75/37.5=2rem。

1.9K41

关于移动端适配，你必须要知道的

iOS的尺寸单位为 pt， Android的尺寸单位为 dp， ReactNative中没有指定明确的单位，它们其实都是设备独立像素 dp。...所以，当页面缩放比例为 100%时， CSS像素=设备独立像素， 理想视口=视觉视口。 我们可以通过调用 screen.width/height来获取理想视口大小。...，我们来看看它们的具体含义： Value| 可能值| 描述 -|-|- width| 正整数或 device-width | 以 pixels（像素）为单位， 定义布局视口的宽度。...height| 正整数或 device-height | 以 pixels（像素）为单位， 定义布局视口的高度。 initial-scale| 0.0-10.0|定义页面初始缩放比率。...以 iPhone6为例：布局视口为 375px，则 1rem=37.5px，这时 UI给定一个元素的宽为 75px（设备独立像素），我们只需要将它设置为 75/37.5=2rem。

1.9K20

–我对移动端适配的了解

(以iphone6为例: dpr = 750 / 375 , 所以它的像素密度比为2，即 1个CSS像素 跨越了 2个物理像素)，我们可以通多 window.devicePixelRatio 来获取设备的像素密度...故布局视口是看不见的，浏览器厂商设置的一个固定值，如980px，并将980px的内容缩放到手机屏内。一块手机屏幕，物理像素的数量是固定不变的。...以rem作为宽度单位，固定布局视口。...1，则 html 元素的 font-size 即1 rem等于可视视口的宽度，此时以 rem 为单位的长度 n rem 就可以理解为 n 倍可视视口的长，这个系数取 0.01 时，1 rem 等于可视视口宽的...，即设计稿中 100px 的长度对应css中 1rem，将设计稿中的长度数值除以 100 得到的就是以 rem 为单位的 css 长度的数值，设计稿的宽换算为以 rem 为单位的 css 长度应为 (750

2K30

移动端自适应的常见手段

相关概念 1.1 像素 image 分辨率（Resolution） 分辨率是指位图图像中细节的精细程度，以每英寸像素（ppi）衡量。每英寸的像素越多，分辨率就越高。...相关问题：图片或 1px 边框显示模糊 在移动端中，常见图片或者 1px 的边框在一些机型下显示模糊/变粗的问题。基于对像素相关的概念理解，可知 CSS 中的 1px 是指一个单位的逻辑像素。...一个单位的逻辑像素映射到不同像素密度比的设备下，实际对应的物理像素不同。 因此，同样尺寸的图片在高密度比的设备下，由于一个位图像素需要应用到多个物理像素上，所以会比低密度比设备中的视觉效果模糊。...在 PC 端上， 元素的宽度被设置为 100% 时，等同于视口大小，等同于浏览器的窗口大小。...通过 document.documentElement.clientWidth 或 window.innerWidth 可以获取视口宽度。CSS 布局基于视口大小进行计算。

1.8K00

什么是移动端开发【重点学习系列—干货十足–一万字详解】

CSS 像素不能直接跟现实中的长度单位换算 CSS 像素主要用在 CSS 与 JS 中控制元素的大小 位图像素 位图像素也是一个长度单位。...在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源。...视觉视口 视觉视口就是用户可见的区域。 获取方式 注：不缩放的情况下，视觉视口宽度 == 布局视口宽度。 理想视口 宽度与屏幕同宽的布局视口称为理想视口。...理想视口的好处 注意：理想视口不是真实存在的视口 设置理想视口的方法 2-缩放 PC 端 放大时 布局视口变小 视觉视口变小 元素的像素大小不变 缩小时 布局视口变大 视觉视口变大 元素的像素大小不变...事件绑定 方式一 方式二 点击穿透 touch 事件结束后会默认触发元素的 click 事件，如没有设置完美视口，则事件触发的时间间隔为 350ms 左右，如设置完美视口则时间间隔为 5ms

2.3K20

探讨移动端适配

他们之间肯定存在着一个比值关系 这里我们就要引申出一个新的概念---视口（Viewport） 我们可以简单的讲视口理解为 屏幕中展示网页的区域。...需要注意的是视口的单位是CSS像素，而非物理像素 如下图 通过查看html的尺寸即可知道视口的尺寸 如图在浏览器大小没有发生改变，没有进行缩放时此时html/视口的尺寸为 1280x116...以Iphone6为例 他的高宽为 750x1334 也就意味着横向只能展示 750个像素点，如果此时有一个900px的盒子，在Iphone6中会正常显示吗 借助调试工具查看 .box1{...我们可以通过改变视口的大小来改变CSS像素和物理像素的比值 如Iphone6 的物理像素是750px这个是固定的，我们要调整像素比，只需将视口调小就可以了如 375，此时正好是1：2 通过meta设置视口大小....vh：1vh等于视口高度的1% 如100vw 在视口宽度为 375px大小时渲染处理的盒子宽度为 375px vw,vh与百分比不同的时vw,vh永远相当于视口的宽度，而百分比是相当于父元素的宽度

1.3K10

H5移动端开发学习总结

viewport（视口） ###3个视口### layout viewport（布局视口）:CSS初始包含块的尺寸。CSS中所有以百分比为单位的长度都是根据它推算出来的。...visual viewport（视觉视口,即用户实际看见的部分）：屏幕上显示的网页区域的尺寸，会被缩放影响，可以通过window.innerWidth来获取。...CSS像素:px(设备独立像素) 逻辑像素，浏览器使用的抽象单位(之所以叫抽象单位，是因为其可以根据不同的设备和不同的关系来变大变小，所以称为抽象单位)为Web开发者创造的，在CSS和JavaScript...在JavaScript中，可以通过window.devicePixelRatio获取到当前设备的dpr。...手机浏览器是把页面放在一个虚拟的”视口”（viewport）中，视口可大于或小于手机屏幕的可视区域，一般手机默认viewport大于可视区域。

93620

【适配】425- 彻底搞懂移动Web开发中的viewport与跨屏适配

维基百科①的解释为： 在计算机图形学理论中，当将一些对象渲染到图像时，存在两个类似区域的相关概念。(视口和窗口) 视口是一个以特定于渲染设备的坐标表示的区域（通常为矩形）。...视口范围内的图像会以剪切的形式，投影到到世界坐标窗口中，完成图像的可视化展示。 在 Web 浏览器中，视口是整个文档的可见部分。如果文档大于视口，则用户可以通过滚动来移动视口。...●在浏览器中，我们可以通过滚动条来移动视口以看到更多网页内容。 更形象的视口解释： ?...2.2 viewport的DOM API 关于上面的解释，我们来验证一下。 目前已被标准实现的 API 中，有两个 DOM 属性可以用来获取视口的大小。...1@viewport { 2 width: device-width; 3} W3C 草案中的获取视口宽度 API 为： 1window.visualViewport.width; 结语 本文参考了

2.7K30

彻底搞懂移动Web开发中的viewport与跨屏适配

维基百科①的解释为： 在计算机图形学理论中，当将一些对象渲染到图像时，存在两个类似区域的相关概念。(视口和窗口) 视口是一个以特定于渲染设备的坐标表示的区域（通常为矩形）。...视口范围内的图像会以剪切的形式，投影到到世界坐标窗口中，完成图像的可视化展示。 在 Web 浏览器中，视口是整个文档的可见部分。如果文档大于视口，则用户可以通过滚动来移动视口。...●在浏览器中，我们可以通过滚动条来移动视口以看到更多网页内容。 更形象的视口解释： ?...2.2 viewport的DOM API 关于上面的解释，我们来验证一下。 目前已被标准实现的 API 中，有两个 DOM 属性可以用来获取视口的大小。...1@viewport { 2 width: device-width; 3} W3C 草案中的获取视口宽度 API 为： 1window.visualViewport.width; 结语 本文参考了

3.1K20

移动端适配必须掌握的基本概念和适配方案

当可视视口比布局视口小时，浏览器网页就会出现横向滚动条，以支持用户浏览整个网页的内容。...通常情况下，大多数移动设备的 Viewport（一般指布局视口）的宽度都是 980 像素，而可视视口（即设备独立像素）通常都小于 980 像素。...=no"> Viewport 属性： 属性 含义 取值 width 定义视口的宽度，单位为像素 正整数或 device-width（设备的宽度） height 定义视口的高度，单位为像素 正整数或 device-height...实际开发中，应该以 rem 单位为基础，同时结合其他单位协同工作。 vw 适配 vw 是一个相对于 viewport 的单位，100vw 就等于 viewport 的宽度。...以常用的 750px 设计稿尺寸为例，假设设计稿的某个字体大小是 40px，换算成 vw 单位大小应该为 （40 / 750）* 100vw = 5.33333vw。

97040

响应式布局，你需要知道这些

设备像素与CSS像素的区别是什么？ EM，REM 的计算规则是什么？实际应用中如何选择？ 什么是视口 viewport，布局视口，视觉视口，理想视口的区别？ 百分比单位和视口单位的计算规则是什么？...> 进行设置，viewport 元标签的取值有 6 种， width，正整数 | device-width，视口宽度，单位是 CSS 像素，如果等于 device-width，则为理想视口的宽度 height...1vh = 1% 视口高度 以 IPhone X 为例，vw 和 CSS 像素的换算如下， <meta name="viewport" content="width=device-width, initial-scale...，浏览器会根据下面的顺序加载图片， <em>获取</em>设备<em>视</em><em>口</em>宽度 从上到下找到第一个<em>为</em>真的媒体查询 <em>获取</em>该条件对应<em>的</em>图片尺寸 加载 srcset 中最接近这个尺寸<em>的</em>图片并显示 除了上述方式外，我们也可以使用 HTML5

1.6K20

移动端H5开发之页面适配篇

一般我们所说的视口共包括三种：布局视口、视觉视口和理想视口1.1 布局视口图片在移动端，布局视口被赋予一个默认值，大部分为980px，这保证PC的网页可以在手机浏览器上呈现，用户可以手动对网页进行放大。...我们可以通过调用 document.documentElement.clientWidth / clientHeight来获取布局视口大小。1.2 视觉视口图片视觉视口，用户通过屏幕真实看到的区域。...我们可以通过调用 window.innerWidth / innerHeight 来获取视觉视口大小。...1.3 理想视口图片视觉视口，用户通过屏幕真实看到的区域我们可以通过调用 window.screen.width / height 来获取视觉视口大小1.4 页面适配方法综上所述，为了在移动端让页面获得更好的显示效果...这个函数最初由 iOS 浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的 safe-area-inset-* 值用于确保内容即使在非矩形的视区中也可以完全显示。

6.6K92

SVG精髓阅读笔记

计算机中描述图形信息的二大系统是栅格图形和矢量图形,在栅格图形系统中,图像被表示为图片元素或者像素的长方形数组,每个像素用其RGB颜色值或者颜色表内的索引表示,这一系列像素也称为位图....在矢量图形系统中,图像被描述为一系列几何形状,矢量图形阅读器接受在指定坐标集上绘制形状的指令,而不是接受一系列已经计算好的像素.有人把矢量图形描述为一组绘图指令,而位图则是在特定的位置填充颜色的点....视口,文档使用的画布区域称为视口,单位可以em,默认字体大小,ex 字母x的高度,px像素,pt点pc12点cm厘米,mm毫米,in英寸可混用,没有单位默认为像素 默认坐标是水平坐标向右递增,垂直坐标垂直向下递增...,以使图形完全填充视口, 2:按较大的尺寸等比例缩放图形并裁剪掉超出视口的部分 3:拉伸和挤压绘图以使其恰好填充新的视口 属相preserveAspectRatio允许我们指定被缩放的图形相对于视口的对齐方式...参数slice会裁剪图形不适合视口的部分, 如果使用none参数,图像不会被等比例缩放,以使它的用户坐标适合视口.

1.4K20

布局常用解决方案对比(媒体查询、百分比、rem和vwvh）

px和视口 媒体查询 百分比 自适应场景下的rem解决方案 通过vw/vh来实现自适应 一、px和视口 在静态网页中，我们经常用像素（px）作为单位，来描述一个元素的宽高以及定位信息。...也就是说在不设置网页的viewport的情况下，pc端的网页默认会以布局视口为基准，在移动端进行展示。因此我们可以明显看出来，默认为布局视口时，根植于pc端的网页在移动端展示很模糊。...换句话说，理想视口或者说分辨率就是给定设备物理像素的情况下，最佳的“布局视口”。 上述视口中，最重要的是要明确理想视口的概念，在移动端中，理想视口或者说分辨率跟物理像素之间有什么关系呢？...： 属性名取值描述width正整数定义布局视口的宽度，单位为像素height正整数定义布局视口的高度，单位为像素，很少使用initial-scale[0,10]初始缩放比例，1表示不缩放minimum-scale...，移动端以iphone6为例，分辨率为375 * 667，也就是说布局视口在理想的情况下为375px。

1.7K40

【说站】css样式单位px，em，pt，ex，pc，in，mm，cm详解

其实css中的长度单位有px、em、pt、in、ex、pc、mm、cm、ch、rem、vw、vh、vmin、vmax。下面品自行将对这些css样式的长度单位做详细说明。...可以尝试和下面的in英寸进行对比，1pt = 1/72 of 1in； 4、ex：相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。...相对于根元素的字体大小（font-size）； 11、vw：相对长度单位。相对于视口*宽度的 1%； 12、vh：相对长度单位。相对于视口*高度的 1%； 13、vmin：相对长度单位。...相对于视口*较小尺寸的 1％ ，vw和vh中较小的那个； 14、vmax：相对长度单位。相对于视口*较大尺寸的 1％，vw和vh中较大的那个；  视口（Viewport）= 浏览器窗口的尺寸。...长度由一个数字和单位组成如 8px，2em，10in，7pt，20pc等等。 数字与单位之间不能出现空格。如果长度值为 0，则可以省略单位。

1.9K21

移动端H5开发基础

屏幕尺寸 手机屏幕对角线的长度，单位：英寸，1英寸=2.54厘米 2....屏幕分辨率 横纵向上的像素点（物理像素）数（个数），1px=1个像素点，也称物理像素，例如iphone6的屏幕分辨率为：750*1336 3....物理像素 屏幕分辨率，是呈像的最小单位 2....CSS像素 web开发的最小单位，一个CSS像素在移动设备上最终会转成物理像素去呈像 一个CSS像素占用多少个物理像素，取决于【设备特性】、【用户缩放行为】 3....用户缩放 用户手动放大：1个CSS像素面积变大，区域内CSS像素个数减少，视觉视口尺寸变小 移动端，用户缩放影响视觉视口的尺寸（布局视口影响布局（块换行等），引起重绘等，所以改变的是视觉视口） 2.

1.3K20
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券