当前位置：首页 > news >正文

网站设计一个月多少钱做网站建网站公司

news 2025/8/9 12:40:27

网站设计一个月多少钱,做网站建网站公司,有没有做任务能兑换现金的网站,宜宾长宁网站建设.matchmedia2011年的文章已于2018年更新。自从CSS取代表格以来， 自适应设计是最令人兴奋的Web布局概念之一。基础技术使用媒体查询来确定查看设备的类型，宽度，高度，方向，分辨率，长宽比和颜色深度&#x…

.matchmedia

2011年的文章已于2018年更新。

自从CSS取代表格以来，自适应设计是最令人兴奋的Web布局概念之一。 基础技术使用媒体查询来确定查看设备的类型，宽度，高度，方向，分辨率，长宽比和颜色深度，以服务于不同的样式表。

如果您认为自适应设计仅用于CSS布局，那么您将很高兴听到媒体查询也可以在JavaScript中使用，正如本文将介绍的那样。

CSS中的媒体查询

在以下示例中，cssbasic.css被提供给所有设备。但是，如果屏幕水平宽度为500像素或更大，则还会发送csswide.css：

<link rel="stylesheet" media="all" href="cssbasic.css" />
<link rel="stylesheet" media="(min-width: 500px)" href="csswide.css" />

可能性是无限的，并且该技术早已被Internet上的大多数网站所采用。调整浏览器宽度的大小会触发网页布局的更改。

如今，借助媒体查询，可以轻松调整CSS中的设计或调整元素的大小。但是，如果您需要更改内容或功能怎么办？例如，在较小的屏幕上，您可能希望使用较短的标题，较少JavaScript库或修改小部件的操作。

可以使用JavaScript分析视口大小，但有点混乱：

大多数浏览器都支持window.innerWidth和window.innerHeight 。（版本10之前的怪癖模式下的IE需要document.body.clientWidth和document.body.clientHeight 。）
window.onresize
所有主要的浏览器都支持document.documentElement.clientWidth和document.documentElement.clientHeight但不一致。根据浏览器和模式，将返回窗口或文档尺寸。

即使您成功检测到视口尺寸变化，也必须自己计算诸如方向和纵横比之类的因素。当在CSS中应用媒体查询规则时，无法保证它会符合您浏览器的假设。

如何使用JavaScript代码编写媒体查询

幸运的是，可以在JavaScript中响应CSS3媒体查询状态更改。关键的API是window.matchMedia 。这会传递一个与CSS媒体查询中使用的媒体查询字符串相同的媒体查询字符串：

const mq = window.matchMedia( "(min-width: 500px)" );

matches属性根据查询结果返回true或false。例如：

if (mq.matches) {
// window width is at least 500px
} else {
// window width is less than 500px
}

您还可以添加事件侦听器，该侦听器在检测到更改时将触发：

// media query event handler
if (matchMedia) {
const mq = window.matchMedia("(min-width: 500px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) {
// window width is at least 500px
} else {
// window width is less than 500px
}
}

您还应该在定义事件之后直接调用处理程序。这将确保您的代码可以在页面加载期间或之后进行初始化。没有它，如果用户不更改其浏览器尺寸，将永远不会调用WidthChange() 。

在撰写本文时， matchMedia具有出色的浏览器支持，因此没有理由不能在生产中使用它。

在调整浏览器窗口大小时，请检查下面演示中的文本如何从大于500像素动态更改为小于500像素 。或者，下载示例代码：

请参阅CodePen上SitePoint （ @SitePoint ）提供的带JavaScript的Pen CSS媒体查询。