根据屏幕宽度设计响应式布局

最新推荐文章于 2024-05-03 14:55:36 发布

Belong to yourself

最新推荐文章于 2024-05-03 14:55:36 发布

阅读量1.6k

点赞数

分类专栏： html 文章标签： html css

本文链接：https://blog.csdn.net/qq_43739929/article/details/106816789

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

响应式布局

简述：

根据不同的终端类型和页面的分辨率，执行不同的页面样式，达到自适应终端的目的，提升用户使用体验。（由h5引入）

知识点：

1、@media

媒体查询，screen查询屏幕，all查询全部。。。

例如：

@media screen and（max-width:500px）{
	div{
		color:red;
		font-size:20px;
	}
}
@media screen and (min-width:500px){
	div{
		color:green;
		font-size:18px;
	}


}
# 通过媒体查询，设置屏幕宽度小于500px时，div元素为第一个样式，当屏幕宽度大于500xp时，div元素为第二个样式。

实例：

设计响应两个尺寸的页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  	@media screen and (min-width:800px){
  div{
    float:left;
    width:24%;	/*  当页面宽度大于800px时，一行占五个div */
    height:200px;
    background:pink;
    border:solid 2px #333;
  }
}
@media screen and (max-width:800px){
  div{
    float:left;
    width:49%;  /* 当页面宽度小于800px时，一行占两个div，适应手机端 */
    height:200px;
    background:oromo;
    border:solid 2px #af6;
  }
}
  </style>
</head>
<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</body>
</html>

页面展示：

大于800px时

在这里插入图片描述

小于800px时

在这里插入图片描述

Belong to yourself

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
根据屏幕宽度设计响应式布局

响应式布局简述：根据不同的终端类型和页面的分辨率，执行不同的页面样式，达到自适应终端的目的，提升用户使用体验。（由h5引入）知识点：1、@media媒体查询，screen查询屏幕，all查询全部。。。例如：@media screen and（max-width:500px）{ div{ color:red; font-size:20px; }}@media screen and (min-width:500px){ div{ color:green; font-siz
复制链接

扫一扫