您的位置：首页 > Web前端 > BootStrap

响应式布局相关

2015-11-21 13:39 597 查看

实现响应式布局 : css3 中的media query ->最简单的方式   或者使用JavaScript ->成本高,不推荐或者第三方开源框架;

常见属性: device-width , device-height ,屏幕宽高

     width,height ,渲染窗口宽高

     orientation , 设备方向

     resolution , 设备分辨率

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="link.css" <span style="color:#FF0000;">media="only screen and (max-width:480px)</span>"/>
<style type="text/css">
<span style="color:#FF0000;">@media screen and (min-width: 480px)</span> {
body{
background-color: red;
}
}
</style>
<title></title>
</head>
<body>
</body>
</html>

确保设备能正常的显示响应式页面必须添加

<span style="color:#FF0000;"><meta name="viewport" content="width=device-width, initial-scale=1.0">

<code>    .container</code> 类用于固定宽度并支持响应式布局的容器。

</span>

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

标签： 响应式 bootstrap

相关文章推荐

新的分享

章节导航

响应式布局 相关

响应式布局相关