Home > Web Front-end > HTML Tutorial > 如何通过CSS3 实现响应式Web设计_html/css_WEB-ITnose

如何通过CSS3 实现响应式Web设计_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:32:15
Original
1265 people have browsed it

如何通过CSS3 实现响应式Web设计:

分为三个步骤:(1)允许网页宽度自动调整。首先在页面头部中,我们需要加入这样一行:  viewport是网页默认的宽度和高度,网页的宽度默认就等于自己屏幕宽度(width=device-width),并且原始缩放比例(initial-scale=1)为1.0,也就是网页初始大小占屏幕面积的100%。(2)流式布局。不使用绝对宽度布局和字体大小,也就是css中代码中,定义宽和高的时候不能使用px(width:px)只能使用百分比(width:%)或者(width:auto)定义高宽。定义字体大小也使用相对单位(em),不使用绝对单位(px)。(3)媒体查询(media query)@media only screen and (max-width:px)max-width就是当屏幕小于等于多少的时候执行而(min-widt)就是当屏幕大于等于多少的时候执行。

source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template