响应式布局

来源：互联网发布：手机淘宝店招在线制作编辑：程序博客网时间：2024/05/20 08:22

什么是响应式？
响应式 Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。

实现：

<!doctype html><html><head><meta charset="utf-8">        <meta name="viewport" content="width=device-width,initial-scale=1.0">// 1：1缩放

content属性值 :
width:可视区域的宽度，值可为数字或关键词device-width
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放

使用媒体查询
媒体查询可以被用在css中的@media 和@import 规则上，也可以被用在html 和xml中；

媒体查询三种写法：
屏幕宽度为800时的样式

@media screen and (width:800px){...........}

@import url(changestyle.css) screen and (width:800px);

<link media="screen and(width:800px)" rel="stylesheet" href="changestyle.css"/>

例：

<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>Responsive layout </title><style>@media (min-width:900px){    body{        background-color:#FC9}    }@media (max-width:900px){    body{        background-color:#F69}    }</style></head><body></body></html>

当窗口宽度变动为900以下时，背景颜色会改变

0 0