CSS响应式布局

最新推荐文章于 2022-10-24 17:06:45 发布

小满和小晨

最新推荐文章于 2022-10-24 17:06:45 发布

阅读量95

点赞数

本文链接：https://blog.csdn.net/fjd7474/article/details/114526033

版权

简介

响应式布局是在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

优缺点

优点：
1.面对不同分辨率设备灵活性强
2.能够快捷解决多设备显示适应问题
缺点：
1.兼容各种设备工作量大，效率略慢
2.代码累赘，会出现隐藏无用的元素，加载时间加长
3.其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
4.一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

使用

@media mediatype and|not|only (media feature) {
  CSS-Code;
}

@media定义媒体查询，mediatype代表了设备类型，目前只有screen最常用，and|not|only为条件，media feature为媒体特点，通常是写设备的宽度。

@media screen and (max-width:960px) 的意思为：当前设备为screen（电脑、平板、手机）时，并且最大宽度为960时，显示的样式。

媒体类型有：
all 所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等
speech 应用于屏幕阅读器等发声设备2

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>


        @media screen and (min-width: 960px) {
            body {background: yellow;}
        }

        @media screen and (min-width: 750px) and (max-width: 960px) {
          body { background: red; }
        }


        @media screen and (max-width: 750px) {
            body { background: blue; }
        }


    </style>
</head>
<body>

</body>
</html>

ios和android浏览器都基于webkit内核，这两种浏览器和许多其它浏览器都支持用viewport meta元素覆盖默认的画布缩放设置。只需要在HTML的标签中插入一个标签，meta标签中可以设置具体的宽度或缩放比。下面为示例

 <meta name="viewport"  content="initial-scale=1.0,width=device-width" />

    name=”viewport”  说明此meta标签定义视口的属性
    initial-scale=2.0   意思是将页面放大两倍
    width=device-width   告诉浏览器页面的宽度等于设备宽度

    允许用户将页面最大放大至设备宽度3倍，最小压缩至设备宽度的一半
    <meta name=”viewport” content=”width=device-width, maximum-scale=3, minimum-scale=0.5” />

    禁止用户缩放，可以在混合APP时，为了使html页面更逼真，使页面无法缩放
    <meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />   //user-scalable=no是禁止缩放

小满和小晨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS响应式布局

简介响应式布局是在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。优缺点优点：1.面对不同分辨率设备灵活性强2.能够快捷解决多设备显示适应问题缺点：1.兼容各种设备工作量大，效率略慢2.代码累赘，会出现隐藏无用的元素，加载时间加长3.其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果4.一定程度上改变了网站原有的布局结构，会出现用户混淆的情况使用@media media
复制链接

扫一扫