html中根据屏幕大小变化的单位,根据浏览器窗口大小的自适应 单位

小白心得

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

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

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

绝对的，只是个人的理解而已。现在有很多前端开发框架都有响应式布局的功能，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是其中的一个，详细请