• 欢迎访问鲁巴客网站,网络赚钱信息,游戏推广教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入鲁巴客 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

css获取屏幕分辨率调整字体大小

專欄 xyh 2年前 (2017-08-26) 114次浏览 已收录 0个评论 扫描二维码

这个是为了解决什么问题?

我最近在做一个项目。客户要求标题可以根据用户屏幕的尺寸而自动改变大小。我知道我通常用的相对字体单位(注* 如px, pt, em)只是相对于HTML根元素的大小而自动改变,而不是相对于用户的屏幕。
在上网查询之后我发现一种新的字体大小单位,叫做:Viewport-Percentage Lengths.

它是怎么工作的?

其实非常简单。一个单位相于当前视图窗口大小的1%,宽度和高度是不同的,分别用(vw, vh)表示。你可以通过vmin和vmax设置最大最小值。
  1vw = 当前视图窗口(viewport)1%的宽度
  1vh = 当前视图窗口(viewport)1%的高度
  1vmin = 1vw 或 1vh, 取决于哪个更小一点
  1vmax = 1vw 或 1vh, 取决于哪个更大一点
如果当前视图窗口宽度是100毫米,那么5vw就是5毫米。
vmin 和 vmax 的设置就像这样:
section {
 width: 100vmin;
 background-color: #ff5442;
}

示例

这里有一份完整的示例1示例2
注* Bootstrap之类的响应式布局CSS框架多采用 @media (max-width: *) {} 之类响应式样示实现。
// 屏幕宽度小于767个象素时应用的CSS样式
@media (max-width: 767px) {
   //CSS代码
}
// 屏幕宽度在767和991象素之间的CSS样式
@media (min-width: 768px) and (max-width: 991px) {
   //CSS代码
}
此法在大小在跨过临界值时才会发生改变。而vh,vw这样的单位会随窗口大小而立刻发生改变。
=========css==============
body {
background-color: #ff5442;
font-family: ‘Lato’, Arial, sans-serif;
margin: 2vw;

}

h1 {
color: #fff;
font-size: 6vw;
font-weight: 900;
text-transform: uppercase;
line-height: .3vw;
}

h2 {
color: #fff;
font-size: 4vw;
}

p {
color: #fff;
font-size: 1em;
}

==============css===============
=============html============
<html lang=”en-US”>
<head>
<title>Responsive Type with CSS – by Dapper Gentlemen</title>
<link href=’https://fonts.googleapis.com/css?family=Lato:900′ rel=’stylesheet’ type=’text/css‘>
</head>

<body>
<header>
<h1>
Dapper Gentlemen
</h1>
<h2>
Designing the internet.
</h2>
</header>

<section>
<p>
By using vW as a sizing unit we can have type, margins, containers and more scale to the screen width of the user.
</p>
<p>
</body>
</html>

=============html===========

须弥网 , 版权所有丨如未注明 , 均为原创
转载请注明:css获取屏幕分辨率调整字体大小! css获取屏幕分辨率调整字体大小
喜欢 (0)
[]
分享 (0)

您必须 登录 才能发表评论!