css获取屏幕分辨率

蔚落 2022-12-22 01:00 379阅读 0赞

[原文链接][Link 1]

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>em</td> 
   <td>它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；</td> 
  </tr> 
  <tr> 
   <td>ex</td> 
   <td>依赖于英文字母小 x 的高度</td> 
  </tr> 
  <tr> 
   <td>ch</td> 
   <td>数字 0 的宽度</td> 
  </tr> 
  <tr> 
   <td>rem</td> 
   <td>根元素（html）的 font-size</td> 
  </tr> 
  <tr> 
   <td>vw</td> 
   <td>viewpoint width，视窗宽度，1vw=视窗宽度的1%</td> 
  </tr> 
  <tr> 
   <td>vh</td> 
   <td>viewpoint height，视窗高度，1vh=视窗高度的1%</td> 
  </tr> 
  <tr> 
   <td>vmin</td> 
   <td>vw和vh中较小的那个。</td> 
  </tr> 
  <tr> 
   <td>vmax</td> 
   <td>vw和vh中较大的那个。</td> 
  </tr> 
 </tbody> 
</table>

由此可见，通过*vh / vw *我们可以获得当前屏幕的视窗宽度，所以在css中，通过计算这个高度即可使得div的高度自动撑开到屏幕高度。而计算这个高度可以使用css3的*calc()*函数(参考[详细教程][Link 2])：

calc() 函数用于动态计算长度值。

*  需要注意的是，运算符前后都需要保留一个空格，例如：`width: calc(100% - 10px)`；
 *  任何长度值都可以使用calc()函数进行计算；
 *  calc()函数支持 "+", "-", "\*", "/" 运算；
 *  calc()函数使用标准的数学运算优先级规则；

所以，只需设置*div*的高度*height*为*calc(100vh)*即可,*100vh* = 视窗高度的100%，例子：

div {
      width: 100%;
      height: calc(100vh);
    }

[Link 1]: https://blog.csdn.net/qq_32063079/article/details/89766442
[Link 2]: https://www.runoob.com/cssref/func-calc.html

发表评论取消回复

表情：

评论列表（有 0 条评论，379人围观）

还没有评论，来说两句吧...

相关阅读

相关 Python实现屏幕分辨率获取

Python实现屏幕分辨率获取随着智能设备的普及，屏幕分辨率已经成为了一个不可忽略的参数。在开发过程中，我们需要获取当前设备的屏幕分辨率大小。本文将介绍如何使用Python

喜欢ヅ旅行/ 2024年03月26日 21:30/ 0 赞/ 74 阅读

相关屏幕分辨率：PC / 手机屏幕常见分辨率，前端如何适配分辨率

一、常见的PC屏幕分辨率 <table style="width:680px;"> <tbody> <tr> <td>序号</td> <td>水

亦凉/ 2024年02月25日 02:13/ 0 赞/ 64 阅读

相关修改屏幕分辨率

adb shell wm size 1.修改为指定分辨率 adb shell wm size 1136x2480 2.恢复为默认分辨率

待我称王封你为后i/ 2023年10月14日 16:43/ 0 赞/ 49 阅读

相关 css获取屏幕分辨率

[原文链接][Link 1] <table style="width:500px;"> <tbody> <tr> <td>em</td> <td>它

蔚落/ 2022年12月22日 01:00/ 0 赞/ 380 阅读

相关 android获取手机屏幕分辨率

本文主要解决获取手机屏幕的大小：例子很简单，主要通过 DisplayMetrics 类来获取相关的信息,代码如下效果图： ![Center][] ![Center 1]

墨蓝/ 2022年08月23日 14:58/ 0 赞/ 300 阅读

相关 iPhone屏幕分辨率

设备列表 ![20160426162434077][] ppi的计算方式 ![20160426165506163][] 具体理解： ![201604261

矫情吗；*/ 2022年08月21日 09:46/ 0 赞/ 259 阅读

相关 Android获取屏幕分辨率及DisplayMetrics简介

Android 可设置为随着窗口大小调整缩放比例，但即便如此，手机程序设计人员还是必须知道手机屏幕的边界，以避免缩放造成的布局变形问题。手机的分辨率信息是手机的一项重要信息

阳光穿透心脏的1/2处/ 2022年08月07日 15:59/ 0 赞/ 222 阅读

相关 minigui:获取屏幕分辨率(GetGDCapability)

MiniGUI下获取屏幕分辨率用 [`unsigned int GetGDCapability (HDC hdc, int iItem)`][unsigned int Ge

约定不等于承诺〃/ 2022年05月19日 23:53/ 0 赞/ 305 阅读

相关 Android屏幕分辨率、密度的正确获取

1、dpi的概念，直接上图了。 ![20130526172358482][] 2、dpi和ppi其实原理是相同的，都是每英寸上的点数，对于手机屏幕来说，这两个概

川长思鸟来/ 2022年02月09日 12:29/ 0 赞/ 575 阅读

相关屏幕分辨率

19宽屏: 1440\900 1400\1050 1366\768 1360\768 1280\1024 1152\864 1280\1024

╰+哭是因爲堅強的太久メ/ 2021年11月22日 10:12/ 0 赞/ 390 阅读