响应式开发（1）

最新推荐文章于 2024-07-20 21:41:48 发布

KittyintheBox

最新推荐文章于 2024-07-20 21:41:48 发布

阅读量154

点赞数

文章标签： html css web

本文链接：https://blog.csdn.net/weixin_45994279/article/details/106559543

版权

响应式开发（1）

页面布局方式

固定宽高布局（固定长宽高 px为长度单位）
流失布局（设置相对的高度，百分比）
栅格化布局（将网页广度划分均等的长度）
响应式布局（通过检测设备信息，决定网页布局方式，一般由设备屏幕的宽度来实现）

这4种布局方式不是独立存在的，实际开发过程中往往是相互结合使用的。

响应式布局

Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同战士方式，通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。可以利用媒体查询可以检测到屏幕的尺寸，并展示不同的CSS样式，就可以实现响应式布局。

优点：满足不同尺寸的终端设备非常完美的展示页面内容

缺点：移动端加载会出现问题，过于冗长，需要加载所有元素

响应式布局常用于企业的官网、博客、新闻资讯类型，以浏览内容为主，没有复杂的交互

类型	布局宽度
大屏幕	大于等于1200px
默认	大于等于980px
平板	大于等于768px
手机到平板	小于大于767px
手机	小于等于480px

媒体查询的基本实现方式

CSS语法

@media mediatype and{
	CSS-Code;
}

媒体值

值	描述
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机
speech	应用于屏幕阅读器等发声设备

3.媒体功能

值	描述
device-width	定义输出设备的屏幕可见宽度
max-width	定义输出设备中的页面最大可见区域宽度
min-width	定义输出设备中的页面最小可见区域宽度

4.代码设置不同屏幕宽度下的背景颜色

设置Meta标签

视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
    <title>Document</title>
    <style>
        body{
            background-color: red;
        }
        /* 宽度小于768px */
        @media screen and (max-width: 768px){
            body{background-color: green;
            }
        }     
        /* 宽度小于768px大于998 用and来连接 */
        @media screen and (min-width: 768px) and (max-width: 992px){
            body{background-color: blue;
            }
        } 
        /* 宽度小于992px大于1200 */
        @media screen and (min-width: 992px) and (max-width: 1200px){
            body{background-color:pink;
            }
        } 
        /* 宽度大于1200 */
        @media screen and (min-width: 1200px){
            body{background-color:purple;
            }
        }  

    </style>
</head>
<body>
<!-- 默认情况下，body的背景色：red
w<768 green
w:768~992 blue
w:992~1200 pink
w>1200:purple -->
</body>
</html>

KittyintheBox

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式开发（1）

响应式开发（1）页面布局方式固定宽高布局（固定长宽高 px为长度单位）流失布局（设置相对的高度，百分比）栅格化布局（将网页广度划分均等的长度）响应式布局（通过检测设备信息，决定网页布局方式，一般由设备屏幕的宽度来实现）这4种布局方式不是独立存在的，实际开发过程中往往是相互结合使用的。响应式布局Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同战士方式，通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。可以利用媒体查询可以检测到屏幕的尺寸
复制链接

扫一扫