您的位置：首页 > 其它

响应式布局

2016-01-12 20:29 381 查看

什么是响应式？

响应式 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以下时，背景颜色会改变

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航