CSS 媒体特性 - 宽度



CSS 媒体特性width用于确定视口(浏览器查看区域)的宽度(水平尺寸)。

width媒体特性也可以与min-widthmax-width属性一起使用,以设置视口的最小和最大宽度。

可能的值

  • <length> − 视口的宽度由特定的长度值表示,例如像素 (px) 等。

语法

@media (width: <length>){ //CSS styles }

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS width - <length> 值

以下示例演示了当屏幕宽度为 200px 时,使用width媒体特性将背景颜色更改为粉红色的方法:

Open Compiler
<html> <head> <style> iframe { display: block; } </style> </head> <body> <label id="labelWidth" for="height">Width: 100</label> <input id="width" name="width" type="range" min="100" max="300" step="5" value="100" /> <iframe id="block" srcdoc="<style> @media (width: 200px) { div { background: pink; } } </style><div>To see the effect resize your viewport's width is 200px.</div>"> </iframe> <script> const updateSize = (size, label) => { block.style[size] = `${eval(size).value}px`; label.textContent = `${size}: ${eval(size).value}`; }; width.oninput = () => updateSize("width", labelWidth); </script> </body> </html>

CSS width - min-width 变体

以下示例演示了当屏幕宽度大于或等于200px时,使用min-width媒体特性将背景颜色更改为红色的方法:

Open Compiler
<html> <head> <style> iframe { display: block; } </style> </head> <body> <label id="labelWidth" for="height">Width: 200</label> <input id="width" name="width" type="range" min="100" max="300" step="5" value="200" /> <iframe id="block" srcdoc="<style> @media (min-width: 200px) { div { background: red; } } </style><div>To see the effect resize your viewport's width.</div>"> </iframe> <script> const updateSize = (size, label) => { block.style[size] = `${eval(size).value}px`; label.textContent = `${size}: ${eval(size).value}`; }; width.oninput = () => updateSize("width", labelWidth); </script> </body> </html>

CSS width - max-width 变体

以下示例演示了当屏幕宽度小于或等于250px时,使用max-width媒体特性将背景颜色更改为粉红色的方法:

Open Compiler
<html> <head> <style> iframe { display: block; } </style> </head> <body> <label id="labelWidth" for="height">Width: 100</label> <input id="width" name="width" type="range" min="100" max="300" step="5" value="100" /> <iframe id="block" srcdoc="<style> @media (max-width: 250px) { div { background: pink; } } </style><div>To see the effect resize your viewport's width.</div>"> </iframe> <script> const updateSize = (size, label) => { block.style[size] = `${eval(size).value}px`; label.textContent = `${size}: ${eval(size).value}`; }; width.oninput = () => updateSize("width", labelWidth); </script> </body> </html>
广告