css3 @media 实现响应式布局_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:25:40

Original

1316 people have browsed it

使用css3的@media，可以实现针对不同媒体、不同分辨率的响应式布局。

方法1：根据不同分辨率使用不同css文件

例如

<link rel="stylesheet" media="screen and (max-width: 1024px)" href="middle.css" /><link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

Copy after login

方法2：同一css文件中，根据不同分辨率使用不同样式

.first {background-color: white;}.second {background-color: black;}@media screen and (max-width: 800px) { /*当屏幕尺寸小于800px时，应用下面的CSS样式*/    .first {background-color: green;}    .second {background-color: skyblue;}}@media screen and (max-width: 480px) { /*当屏幕尺寸小于480px时，应用下面的CSS样式*/    .first {background-color: yellow;}    .second {background-color: red;}}

Copy after login

参考：

http://www.runoob.com/cssref/css3-pr-mediaquery.html

Related labels：

css3 @media 实现响应式布局

source：php.cn

Previous article：纯CSS3时钟_html/css_WEB-ITnose Next article：纯css3流星雨_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn