关闭

响应式布局 相关

标签: 响应式bootstrap
144人阅读 评论(0) 收藏 举报


实现响应式布局  :  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>






0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:845次
    • 积分:51
    • 等级:
    • 排名:千里之外
    • 原创:4篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条
    文章存档