W3.CSS Built-In Responsiveness (响应式)

2020-12-01 10:32 更新

W3.CSS的网格系统是响应式的,并且各列将根据屏幕大小自动重新排列:

描述
w3-half 占用窗口的1/2(在大屏幕和大屏幕上)
w3-third 占据窗口的1/3(在大屏幕和大屏幕上)
w3-twothird
占用窗口的2/3(在大屏幕和大屏幕上)
w3-quarter
占用窗口的1/4(在大屏幕和大屏幕上)
w3-threequarter
占用窗口的3/4(在大屏幕和大屏幕上)
w3-rest
占用列的其余宽度
w3-col
在12列响应式网格中定义一列
w3-mobile
向单元格(列)添加移动优先响应。
在移动设备上将元素显示为块元素。

上面的响应类必须放置在 w3-row类(或 w3-row-padding 类)中,才能完全响应。

描述
w3-row
响应式类的容器,无填充
w3-row-padding
响应类的容器,左右填充为 8px
w3-content
固定大小居中内容的容器
   
w3-hide-small
在小屏幕(小于 601px )上隐藏内容
w3-hide-medium
在中等屏幕上隐藏内容
w3-hide-large
在大屏幕(大于 992px )上隐藏内容
   
l1 - l12
大屏幕的自适应尺寸
m1 - m12
中型屏幕的响应大小
s1 - s12
小屏幕的自适应尺寸

w3-half 类

w3-half 

类的宽度是父元素的 1/2(style =“ width:50%”)。

在小于 601px 的屏幕上,其尺寸会调整为 100%。

    w3-half
    w3-half

实例

<div class="w3-row">

  <div class="w3-half w3-container w3-green">

    <h2>w3-half</h2>

  </div>

  <div class="w3-half w3-container">

    <h2>w3-half</h2>

  </div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

w3-third 类

w3-third 类的宽度是父元素的 1/3(style =“ width:33.33%”)。

在小于 601px 的屏幕上,其尺寸会调整为 100%。

    w3-third
    w3-third
    w3-third

实例

<div class="w3-row">

  <div class="w3-third w3-container w3-green">

    <h2>w3-third</h2>

  </div>

  <div class="w3-third w3-container">

    <h2>w3-third</h2>

  </div>

  <div class="w3-third w3-container">

    <h2>w3-third</h2>

  </div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

w3-twothird 类

w3-twothird 类的宽度是父元素的 2/3(style =“ width:66.66%”)。

在小于 601px 的屏幕上,其尺寸会调整为 100%。 

   w3-twothird
   w3-third
 

实例

<div class="w3-row">

  <div class="w3-green w3-container w3-twothird">

    <h2>w3-twothird</h2>

  </div>

  <div class="w3-container w3-third">

    <h2>w3-third</h2>

  </div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

w3-quarter 类

w3-quarter 类的宽度是父元素的 1/4(style =“ width:25%”)。

在小于 601px 的屏幕上,其尺寸会调整为 100%。

   w3-quarter
   w3-quarter
   w3-quarter
   w3-quarter

实例

<div class="w3-row">

  <div class="w3-green w3-container w3-quarter">

    <h2>w3-quarter</h2>

  </div>

  <div class="w3-container w3-quarter">

    <h2>w3-quarter</h2>

  </div>

  <div class="w3-container w3-quarter">

    <h2>w3-quarter</h2>

  </div>

  <div class="w3-container w3-quarter">

    <h2>w3-quarter</h2>

  </div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

w3-threequarter 类

w3-threequarter 类的宽度是父元素的 3/4(style =“ width:75%”)。

在小于 601px 的屏幕上,其尺寸会调整为 100%。

   w3-threequarter
   w3-quarter

实例

<div class="w3-row">

  <div class="w3-green w3-container w3-threequarter">

    <h2>w3-threequarter</h2>

  </div>

  <div class="w3-container w3-quarter">

    <h2>w3-quarter</h2>

  </div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

嵌套行

实例:w3-half 内部使用 w3-half

<div class="w3-row">

  <div class="w3-half w3-container">

    <h2>w3-half</h2>

    <div class="w3-row">

      <div class="w3-half w3-container w3-red">

        <h2>w3-half</h2>

        <p>This is a paragraph.</p>

      </div>

      <div class="w3-half w3-container">

        <h2>w3-half</h2>

        <p>This is a paragraph.</p>

      </div>

    </div>

  </div>

  <div class="w3-half w3-container">

    <h2>w3-half</h2>

    <div class="w3-row">

      <div class="w3-half w3-container w3-red">

        <h2>w3-half</h2>

        <p>This is a paragraph.</p>

      </div>

      <div class="w3-half w3-container">

        <h2>w3-half</h2>

        <p>This is a paragraph.</p>

      </div>

    </div>

  </div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

使用 Rest 列

w3-col 类在 12 列响应网格定义了一列。

w3-rest 类将占用其余宽度:

   I am 150px
   I am the rest

实例

<div class="w3-row">

  <div class="w3-col" style="width:150px"><p>I am 150px</p></div>

  <div class="w3-rest w3-green"><p>I am the rest</p></div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

列使用百分比

您还可以使用 CSS width 属性以百分比形式设置宽度:

   20%
   60%
   20%

实例

<div class="w3-row">

  <div class="w3-col" style="width:20%"><p>20%</p></div>

  <div class="w3-col" style="width:60%"><p>60%</p></div>

  <div class="w3-col" style="width:20%"><p>20%</p></div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

w3-content 类

w3-content 类定义固定大小的容器中心的内容。使用 CSS max-width 属性覆盖默认宽度( 980px )。

实例

<body class="w3-content" style="max-width:500px">

  page content...

</body>


尝试一下 »
点击“尝试一下”按钮查看在线实例

w3-row vs w3-row-padding

w3-row 类定义了一个容器,没有填充,而 w3-row-padding 类添加一个 8px 的左和右填充到每个列:

实例

<div class="w3-row">

  <div class="w3-col s4"><img src="img_lights.jpg"></div>

  <div class="w3-col s4"><img src="img_nature.jpg"></div>

  <div class="w3-col s4"><img src="img_snowtops.jpg"></div>

</div>

<div class="w3-row-padding">

  <div class="w3-col s4"><img src="img_lights.jpg"></div>

  <div class="w3-col s4"><img src="img_nature.jpg"></div>

  <div class="w3-col s4"><img src="img_snowtops.jpg"></div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

拉伸填充行

w3-stretch 类去除的元素右和左边缘。此类通常用于拉伸填充行:

实例

<div class="w3-row-padding w3-section w3-stretch">

  <div class="w3-col s4">

    <img src="img_nature_wide.jpg">

  </div>

  <div class="w3-col s4">

    <img src="img_snow_wide.jpg">

  </div>

  <div class="w3-col s4">

    <img src="img_mountains_wide.jpg">

  </div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

响应式显示/隐藏

w3-hide-smallw3-hide-mediumw3-hide-large 类隐藏特定的屏幕尺寸的元件。

注意:调整浏览器窗口的大小以了解其工作原理:

实例

<div class="w3-container w3-hide-small w3-red">

  <p>w3-hide-small will be hidden on small screens (phones)</p>

</div>

<div class="w3-container w3-hide-medium w3-green">

  <p>w3-hide-medium will be hidden on medium screens (tablets)</p>

</div>

<div class="w3-container w3-hide-large w3-blue">

  <p>w3-hide-large will be hidden on large screens (laptops/desktop)</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

w3-mobile 类

 w3-mobile 

类添加移动第一响应性的任何元件。

它将 display:block 和 width:100% 添加到屏幕宽度小于 600px 的元素上。

实例

<a class="w3-button w3-mobile" href="#">Link</a>


尝试一下 »
点击“尝试一下”按钮查看在线实例

屏幕分辨率

W3.CSS的内置响应能力使用屏幕的 DP 尺寸。

W3.CSS将分辨率为 750 x 1334px 的 iPhone 6 视为 375 x 667px DP 的小屏幕。

小屏幕小于 601px DP,中型屏幕小于 993px D​​P。

以下是典型设备分辨率和报告的 DP 大小的列表:

iphone 4

分辨率
640 × 960

DP
320 × 480
 

iphone 5

分辨率
640 × 1136

DP
320 × 528
 

iphone 6

分辨率
750 × 1334

DP
375 × 667
 

iphone 6s

分辨率
1080 × 1920

DP
414 × 736
 

Galaxy S6

分辨率
1440 × 2560

DP
360 × 640
 

Note 4

分辨率
1440 × 2560

DP
400 × 853
 

Nexus 6

分辨率
1440 × 2560

DP
400 × 853
 

iPad Mini

分辨率
768 × 1024

DP
768 × 1024
 

iPad

分辨率
1536 × 2048

DP
768 × 1024
 

典型笔记本电脑

分辨率
1366 × 768

DP
1366 × 768
 

典型台式电脑

分辨率
1920 × 1080

DP
1920 × 1080

12列响应式流体网格

W3.CSS 还支持高级的 12 列响应式流体网格。

调整页面大小以查看效果!

实例

<div class="w3-col m1 w3-center w3-grey"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">1个</font></font></div>

        <div class="w3-col m1 w3-center"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">2</font></font></div>


尝试一下 »
点击“尝试一下”按钮查看在线实例
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号