体彩排列5双期走势图

站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: 简单总结CSS3中视窗单位Viewport的常见用法
搜索:
您的位置: 主页 > 教程 > 网页设计 > CSS > » 正文

简单总结CSS3中视窗单位Viewport的常见用法

来源: 易采站长站

介绍视窗(Viewport)单位

视窗(Viewport)是你的浏览器实际显示内容的区域——换句话说是你的不包括工具栏和按钮的网页浏览器。这些单位是vw,vh,vmin和vmax。它们都代表了浏览器(视窗(Viewport))尺寸的比例和窗口大小调整产生的规模改变。

体彩排列5双期走势图比方说我们有一个1000px(宽)和800px(高)的视窗(Viewport)

vw——代表视窗(Viewport)的宽度为1%,在我们的例子里50vw = 500px。
vh——窗口高度的百分比 50vh = 400px。
vmin——vmin的值是当前vw和vh中较小的值。在我们的例子里因为是横向模式,所以50vim = 400px。
vmax——大尺寸的百分比。50vmax = 500px。
你可以在任何一个可以使用像素值的地方使用它们,比如width,height,margin,font-size等等。它们将通过窗口大小的调整或旋转设备的浏览器来重新计算这些值。

占用页面的整个高度

每一个前端开发人员都致力于这件事。你的第一直觉是这样做:

CSS Code复制内容到剪贴板
  1. #elem{        height: 100%;   
  2. }  

然而,除非我们为html和body添加100%的高度,但只是这样还是不行的,因为这样的代码并不优雅而且很有可能会破坏你的设计的其余部分。使用vh就变得相当容易了,只需要为高度设置100vh,那它将永远都是你窗口的高度。

CSS Code复制内容到剪贴板
  1. #elem{        height: 100vh;   
  2. }  


视口宽度大小
vw是CSS3新加入的一个使用视口宽度来计算字体大小的单位。这样可以允许更多的响应字体大小。

尽管这似乎是为响应式设计的一个很有用的单位,但我个人不是它的粉丝。因为它并不能在字体大小上给我更多的控制权,他总是显示的过大或过小。

我的方法

在我做这项研究之前,我一直使用像素来设置我的字体大小。这是因为现在的大多数浏览器允许用户在字体太小的情况下自行放大页面,所以使用像素并没有什么问题。

但是,我发现这种方式在很大程度上限制了扩展能力。虽然我的字体在中小屏幕上看起来不错,但他应该在大屏幕上有更好的优化。即便用户有放大的选项,这也不应该是我们希望他们来做的事情。

因此我使用rem设置的解决方案是(使用像素作为备用)。

CSS Code复制内容到剪贴板
  1. html {      font-size: 62.5%; /* sets the base font to 10px for easier math */  
Tags: 视窗 CSS3
最新图文资讯
1 2 3 4 5 6
体彩排列5双期走势图相关的文章列表:
体彩排列5双期走势图江苏体彩七位数大小分析 浙江体彩6 1奇偶走势图 体彩排列5双期走势图南粤风采36选7尾数走势图 体彩排列3五码分布走势图 体彩排列5号码遗漏 福彩七乐彩走势图 体彩七星彩走势图 江苏体彩七位数走势图 体彩排列5大小走势图 楚天风采22选5和值走势图 体彩排列5双期走势图河南福彩22选5开奖结果 福彩七乐彩中奖规则 广东南粤风采36选7走势图 七乐彩复式投注及中奖金额计算表 福彩双色球红球尾数走势图 体彩超级大乐透周三走势图 体彩超级大乐透前区尾数走势图 南粤风采36选7单期走势图 福彩双色球周四走势图 体彩排列3和值走势图