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

最新推荐文章于 2024-08-14 19:32:44 发布
最新推荐文章于 2024-08-14 19:32:44 发布
阅读量1.5w 收藏 16
点赞数 3
分类专栏： CSS 文章标签： css 自适应 响应式布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37860963/article/details/80725393
版权
本文介绍了在前端开发中如何实现自适应布局，重点讨论了响应式布局的概念和CSS3的Media Query（媒介查询）作用。作者分享了在不同设备和窗口大小下，如何利用Bootstrap框架和Media Query实现页面布局的自动适应。此外，还提到了新的CSS单位vw、vh、vmin和vmax在创建自适应页面时的应用，通过实例展示了它们如何在页面缩放时保持元素尺寸的比例关系。
摘要由CSDN通过智能技术生成

小白心得

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

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

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

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

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

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

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

最低0.47元/天 解锁文章
青菜配白豆腐
关注
专栏目录
threejs中让场景跟随浏览器窗口大小自适应
weixin_40856652的博客
06-16 1673
threejs中让场景跟随浏览器窗口大小自适应
html中根据屏幕大小变化的单位,根据浏览器窗口大小的自适应 单位
weixin_42472941的博客
06-08 1700
小白心得今天在做页面的时候发现当我把浏览器窗口缩小的时候，里面的控件溢出我想要的边界了，然后我到之前在网上看到的所谓“自适应”这个词语，我查了一下这个“自适应布局”，它又叫做响应式布局，主要是针对页面在不同的设备不同的屏幕大小不同的分辨率下对页面布局的自动适应，其实在我的理解里就是传说中的等比例缩放，或许这也并不是绝对的，只是个人的理解而已。现在有很多前端开发框架都有响应式布局的功能，Bootst...
浏览器自适应窗口
08-07
可以根据浏览器窗口大小来调整内容，适合手机开发
根据浏览器大小使网页内容自动放大缩小
m0_55837832的博客
10-15 3405
尽管是1920*1080的分辨率，在我电脑浏览器显示正常，在其他相同分辨率电脑显示与我的布局不同，还有伴有遮盖，乱码情况，这是因为窗口缩放比例可能不同造成。就像win 如何设置，使得不管神魔比例，都是100%的效果呢？添加如下代码 var t = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25 150% -> 1.5 document.body.style.zoom =1/ t; // 就去修改页面的缩放比例 参考：https:/
html页面缩放自适应
最新发布
蜡笔小新1980的博客
08-14 1517
在我们一般web端进行页面拼接完成后，在web端的显示正常（毕竟我们是按照web端进行页面拼接完成的），那么要是用其他设备打开呢，比如手机或者平板，这时候显示的比例和尺寸跟我们看到的就大相径庭了。由于手机屏幕尺寸不一样，分辨率不一样，或者你需要考虑横竖屏的问题，这时候你也就不得不解决在不同手机上，不同情况下的展示效果了。另外一点，UI一般输出的视觉稿只有一份，比如淘宝就会输出：750px 宽度的（高度是动态的一般不考虑）（详情），这时候开发人员就不得不针对这一份设计稿，让其在不同屏幕宽度下显示 一致。
如何根据浏览器的大小来显示不同的页面布局？(自适应PC和APP)
Wangxinlei_King的博客
09-20 1074
现在很多网站的这种自适应功能是怎么实现的？ 1.当页面用电脑正常打开时，显示的是电脑版的布局 2.当把浏览器的大小调整为和手机屏幕差不多大小时，系统的布局又变为适应手机的布局（左侧的菜单栏没了）...
web页面自适应，rem作单位
09-23
js代码实现页面自适应，css样式可以用rem来做单位，实现界面随浏览器变化而自适应大小
浏览器自适应
qq_41358110的博客
04-21 213
<div class"abc">自适应大小</div> </style> @media screen and (max-width: 2000px) { .abc {top:-130px;} } /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ @media screen and (max-width: 1700px) { .abc {top:-50px;} ...
Unity：WEB端发布后运行时窗口自适应浏览器窗口大小（网页内全屏）
05-03
整体来说我们需要修改两个文件，第一个index.html、第二个是TemplateData文件夹下的 style.css文件。 压缩包内有修改前与修改后的内容。可参考修改！！！ 下面是文章修改链接具体修改可供参考： ...
jquery实现根据浏览器窗口大小自动缩放图片的方法
10-23
在网页设计中，为了提供更好的用户体验，经常需要根据用户的浏览器窗口大小来动态调整页面元素，尤其是图片的尺寸。本文将详细介绍如何使用jQuery实现这一功能，让图片能够自适应浏览器窗口的大小进行缩放。 首先，...
设计师作品展示网页模板是一款根据浏览器的大小自适应终端网站模板下载 .rar
02-21
设计师作品展示网页模板，正如标题和描述中提到的，是一种专为展示设计师作品而设计的网站模板，它具有响应式布局，能够根据用户使用的浏览器窗口大小自动调整布局，确保在不同设备上（如桌面电脑、平板电脑和手机）...
自适应窗口大小，兼容各浏览器
07-31
自适应窗口大小，兼容各浏览器,高度没有被限制，不会出现水平滚动条哦
网页HTML自适应窗口大小
06-01
网页内容自适应窗口大小,适合手机站点页面和PC机上的站点页面尺寸兼容.
css设置自适应浏览器
good good study,day day up~
12-14 387
做页面，经常遇到，在调整浏览器大小的时候，想要实现内容自适应浏览器宽度或者高度，可以使用js处理：    jQuery(window).resize(function(){          jQuery('#contextDiv').width(jQuery(document).width());   });  jQuery(window).resize();   整理获得浏览器宽度和高...
浏览器自适应学习
热门推荐
码上行动
08-27 1万+
由于现在浏览器众多，浏览器兼容，自适应的学习已经成为一个美工，和程序的必修，在这个ipad项目中就遇到这个问题，需要兼容ie,谷歌，火狐，ipad等浏览器。经过度娘和谷歌的介绍咱也学到一点东西，记录一下   浏览器的自适应大小，首先考虑大小自适应就要考虑现在浏览器的分辨率，以及不同浏览器对不同分辨率的解释，以及现在显示器的大小不同分辨率肯定也不同。所以这里就要使用到css的一个百分比属性。
html+css网站开发，如何实现自适应屏幕尺寸大小
yrldjsbk的博客
02-24 2351
以下内容，我们是假设页面内容里仅有文字和图片的情况下，该如何设计，才能让页面尺寸随着设备屏幕尺寸的大小而实时的发生变化。第五："自适应网页设计"的核心，就是CSS3引入的Media Query模块。第三：字体大小是页面默认大小的100%，即16像素，不要使用绝对大小"px"，要使用相对大小“rem”第四：容器的布局模式，采取流动布局，"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。通过以上，对整体文字，图片，尺寸的设计改进，您的页面就可以实现自适应屏幕大小了。用户不具备修改缩放比例的权限。
浏览器宽高自适应
黑暗琪士的博客
10-26 904
宽的自适应： 块状元素当不设置width 或者是设置width:100%; 当前元素宽度跟随父元素发生变化。 高度自适应： a : 如果height:auto； 或者是不设置height的时候。 元素的height被子元素或者其内容撑开。 需求： 1：当内容大于容器的时候。让内容撑开容器 2：当没有内容或者是内容偏少，让容器 保持一个最小高度。 最小高度的...
JS 自适应浏览器大小
weixin_33694172的博客
07-08 209
&lt;script type="text/javascript" language="javascript"&gt;     &lt;!-- var iframeids=["把要自适应宽度的ID传进来"] //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏var iframehide="yes";var windowWidth, windowHei...
网页自适应浏览器方法收录
qq_27698797的博客
08-04 313
在网页的中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。 其中： width=device-width ：表示宽度是设备屏幕的宽度 initial-scale=1.0：表示初始的缩放比例 minimum-scale=0.5：表示最小的缩放比例 maximum-scale=2.0：表示最大的缩放比例 user-scalable=yes：表示用户是否可以调
怎么让图片根据窗口大小自适应缩放呢
05-16
可以通过CSS的background-size属性实现图片根据窗口大小自适应缩放，具体方法如下： 1.将图片设置为元素的背景，可以使用background-image属性。 2.设置background-size属性为contain或cover，contain表示图片缩放后完全包含在元素内，cover表示图片缩放后覆盖整个元素。 3.设置background-repeat属性为no-repeat，避免图片重复。 4.设置元素的宽度和高度为100%。 示例代码： ```html <div class="container"> <div class="image"></div> </div> ``` ```css .container { width: 100%; height: 100%; } .image { background-image: url("your-image-url"); background-size: contain; /*或者cover*/ background-repeat: no-repeat; width: 100%; height: 100%; } ``` 这样，无论浏览器窗口大小如何变化，图片都会根据容器元素的大小自适应缩放。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值