响应式布局相关

最新推荐文章于 2023-06-09 22:39:52 发布

外星男神噢唛嘎

最新推荐文章于 2023-06-09 22:39:52 发布

阅读量421

点赞数

文章标签：响应式 bootstrap

本文链接：https://blog.csdn.net/Niiiiiiiiiii/article/details/49963335

版权

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