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是其中的一个，详细请看看百度，这里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/

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

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

js监听html页面大小变化,js实时获取浏览器窗口大小
js实时获取浏览器窗口大小,我们可以使用addEventListener()方法来实现.该addEventListener()方法可以注册事件处理程序以侦听浏览器窗口resize事件,例如window ...
在Android中处理屏幕布局变化
说明以编程方式处理屏幕布局,锁定屏幕布局.控制活动生命周期,本文简明讲述以编程方式管理屏幕布局,每个小节都聚焦于这个主题的不同方面. 手动处理布局变化首个显要的讨论点是如何手动处理布局变化. 一个 ...
cocos2dx中的屏幕大小
cocos2dx中有几个能获取Size大小的函数,但每个函数的返回值具体是什么意思,相信不是每个童鞋都知道.... ① EGLView::getInstance()->getFrameSize( ...
vue/cli 3.0 font-size随屏幕大小变化而变化 rem设置
在安装cube-ui框架时安装成功后在[E:\WWW\xxx\node_modules\vue-cli-plugin-cube-ui\generator\rem\index.js]修改remUnit ...
vue中echarts自适应屏幕大小
vue中echarts自适应屏幕大小,延迟执行项目中出现echarts适应屏幕大小,有时会遇到不管屏幕大小如何变化echarts图表大小不变的情况:或者出现图表变化延迟的情况,针对这两种情况,分别解 ...
android系统如何自适应屏幕大小
2019独角兽企业重金招聘Python工程师标准>>> 1.屏幕相关概念 1.1分辨率是指屏幕上有横竖各有多少个像素 1.2屏幕尺寸指的是手机实际的物理尺寸,比如常用的2.8英寸 ...
CSS中字体大小随屏幕大小自适应变化
1.通过媒体查询的方式 @media (min-width:0px){html{font-size:12px;} } @media (min-width: 320px){html{font-size: ...
Android屏幕大小和密度对照表，以及px、dip、sp等像素单位的解释
px(Pixels ,像素):对应屏幕上的实际像素点. in(Inches ,英寸):屏幕物理长度单位. mm(Millimeters ,毫米):屏幕物理长度单位. pt(Points ,磅):屏幕物 ...
android中的屏幕单位介绍
1.px (pixels)(像素):是屏幕的物理像素点,与密度相关,密度大了,单位面积上的px 会比较多.通常不推荐使用这个. 2.dip 或dp(与密度无关的像素):一个基于density(密度) ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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