W3.CSS - 响应式设计

W3.CSS响应式设计 - 从简单和简单的步骤学习W3.CSS，从基本到高级概念，包括概述，环境设置，容器，代码着色，卡片，响应式设计，表格，按钮，工具提示，模态对话框，网格，表，列表，图像，图标，颜色，导航，实用程序。

W3.CSS有几个特殊类来创建响应式设计.

锶.不.	类名&描述
1	w3-half 将容器设置为占用中型或大型屏幕设备上窗口的1/2 ^nd.如果屏幕小于601像素，则将容器的大小调整为100％.
2	w3-third 设置容器占用1在中型或大型屏幕设备上的窗口/3 ^rd.如果屏幕小于601像素，则将容器的大小调整为100％.
3	w3-quarter 设置要占用的容器1在中型或大型屏幕设备上的窗口/4 ^th.如果屏幕小于601像素，则将容器的大小调整为100％.
4	w3-col 指定12中的列列网格.
5	w3-row 指定用于响应类的无填充容器.此类必须使响应类完全响应.

示例

w3css_responsive_design.htm

         The W3.CSS Containers                                    Mobile First Design Demo
         Resize the window to see the effect!
            
                                 w3-half
            Sets the container to occupy 1/2^nd of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.

w3-half

w3-third

Sets the container to occupy 1/3^rd of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.

w3-third

w3-quarter

Sets the container to occupy 1/4^th of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.

w3-quarter

结果

验证结果.