Maison > interface Web > tutoriel HTML > 如何通过CSS3 实现响应式Web设计_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-24 11:32:15
original
1265 Les gens l'ont consulté

如何通过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)就是当屏幕大于等于多少的时候执行。

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal