根据浏览器窗口大小的自适应单位

小白心得

今天在做页面的时候发现当我把浏览器窗口缩小的时候，里面的控件溢出我想要的边界了，然后我到之前在网上看

到的所谓“自适应”这个词语，我查了一下这个“自适应布局”，它又叫做响应式布局，主要是针对页面在不同的设备

不同的屏幕大小不同的分辨率下对页面布局的自动适应，其实在我的理解里就是传说中的等比例缩放，或许这也并不是

绝对的，只是个人的理解而已。现在有很多前端开发框架都有响应式布局的功能，Bootstrap这个开发框架就包含这样的类，

说道响应式布局首先想到了CSS3里面的 Media Query（媒介查询）。

那么这个Media Query（媒介查询） 是什么呢？这里借用一下百度百科的一段话：

一、通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。媒介查询的大部分媒介特性都接受min和max用于表达”大于或等于”和”小于或等于”。如：width会有min-width和max-width媒介查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。

用法

@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

举个例子：

   @media 类型 and (条件1) 
 

{

       css样式 
 

   ｝ 这里media 的类型有很多，screen是其中的一个，详细请看看百度，这里max-width:740px是指屏幕尺寸小于等于740px

@media only screen and(max-width:740px){
   /*写对应的样式*/
}

@media only screen and(max-width:980px){
   /*这个就是屏幕小于等于980px */
   /*样式*/
}

二、之后我又看到某个网页说有新的单位能够实现自适应，这些单位是 vw，vh，vmin，vmax。

这个网页是http://ourjs.com/detail/549cbea78a34fa3204000024

1vw = 当前视图窗口（viewport）1%的宽度

1vh = 当前视图窗口（viewport）1%的高度

1vmin = 1vw 或 1vh，取决于哪个更小一点

1vmax = 1vw 或 1vh，取决于哪个更大一点

举个例子吧

h2{
  text-align:center;
  font-size:4vw;
  font-weight:bold;
  margin:0;
}

看看效果

上面这个图是网页最大化时候的截图

然后这个就是缩小之后的截图，我特意把右边白色的地方也截图，好像没什么说服力，如果想看更好的效果可以看下面这个页面，然后就尝试下缩放浏览器窗口，看看效果，这是用这个单位写的样式，然后如果用px单位就会有溢出表框的效果，这里面不只是font-size能用vw单位，其他的涉及到用长度宽度的也能用

https://codepen.io/Fease/details/bKrEXP/

我觉得这些新的单位很好用，当然更加专业更加全面的兼容的响应式布局应该是第一种，第二种的话小页面的话还是可以的

根据浏览器窗口大小的自适应 单位

猜你喜欢

根据浏览器窗口大小的自适应单位