css媒体查询实现响应式设计

最新推荐文章于 2024-06-27 18:04:42 发布

charlene程程

最新推荐文章于 2024-06-27 18:04:42 发布

阅读量890

点赞数

分类专栏： css 文章标签：响应式设计 css

本文链接：https://blog.csdn.net/charlene0824/article/details/49278757

版权

css 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

首先针对设备优化的页面需要在文档头部加上meta视口元素，视口标签可以告诉浏览器网页的纬度和缩放程度是什么。

为了提供最好的用户体验，移动端的浏览器会按照桌面端的屏幕宽度来渲染页面（通常是980px左右，这个值会根据设备的不同有所浮动），为了更容易地阅读页面，字体会相应的加大，内容也会有所缩放来适应屏幕。对于用户来说，这么做的结果就是页面上的字体可能忽大忽小，还可能需要双击或者捏动缩放屏幕才能看清内容。

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

用meta视口的 width=device-width来控制页面以适应密度无关像素的屏幕的宽度，这样页面就在回流的时候可以适应不同的屏幕尺寸，无论是在小屏幕的移动端或者是大屏幕的桌面端都可以适应

当横屏的时候，有些浏览器会保持页面的宽度不变然后放大屏幕，而不是用回流重新加载出页面。添加initial-scale=1属性，使得无论手持设备的方向是怎么样的，CSS的像素和密度无关像素都是1:1的关系，另外还能让页面占满整个横屏宽度。

媒体查询（Media Queries）是一种可以应用在CSS样式上的简易过滤器，它可以根据设备的渲染特性（包括显示类型、宽度、高度、转向甚至是分辨率）来显示不同的样式。

media queries使用方法

方法一：

引用外部css样式

<link type="text/css" href="styleA.css" media="screen and (min-width:300px);

意思是当屏幕的宽度大于等于300px的时候，应用styleA.css样式

在media属性里：

screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型
and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)
(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。完整的特性参看相关的Media features部分

方法二：

直接写在style标签中

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  .class {
    background: #ccc;
  }
}

方法三：

使用@import 但是其性能没有前两种方法好

@import url(styleA.css) screen;

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- 添加initial-scale=1，使得CSS中的像素和密度无关像素的对应关系是1:1的 -->
	<!-- 添加width=device-width来适应不同的密度无关像素(device independent pixels)时屏幕的宽度。 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>响应式设计</title>
	<style type="text/css">
	.contain{
		padding:5px;
		border:1px solid red;
		/*width:100%;*/
		/*height: 600px;*/
	}
	.row{
		border:1px solid green;
		padding:5px;
		/*width:1060px;*/
		margin:0 auto;
	}
	.col{
		background-color: #10F999;
		float:left;
		width:80px;
		height: 80px;
		margin:5px;
	}
	/*当视图宽度大于1060px时，一行显示全部的div*/
	@media (min-width: 1060px) and (max-width:) {
   		.contain {
     		width:100%;
     		height:120px;
   		}
   		.row{
   			width:1100px;
   			height:100px;
   		}
 	}
    /*当视图宽度大于600px时，一行显示6个div*/
 	@media screen and (min-width: 600px) and (max-width: 1060px) {

   		.contain {
     		width:100%;
     		height:240px;
   		}
   		.row{
   			width:550px;
   			height:200px;
   		}
   	}
 /*当视图宽度大于430px时，一行显示4个div*/
    @media screen and (min-width: 430px) and (max-width: 600px){

   		.contain {
     		width:100%;
     		height:360px;
   		}
   		.row{
   			width:400px;
   			height:300px;
   		}
   	}
 	/*当视图宽度大于300px时，一行显示3个div*/
    @media screen and(min-width: 300px) and (max-width: 450px) {

   		.contain {
     		width:100%;
     		height:480px;
   		}
   		.row{
   			width:280px;
   			height:400px;
   		}
   	}
 	/*当视图宽度大于300px时，一行显示3个div*/
    @media screen and (min-width: 200px) and(max-width: 300px) {

   		.contain {
     		width:100%;
     		height:600px;
   		}
   		.row{
   			width:200px;
   			height:550px;
   		}
   	}
	</style>
</head>
<body>
	<div class="contain">
		<div class="row">
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
		</div>
	</div>
</body>
</html>

charlene程程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css媒体查询实现响应式设计

首先针对设备优化的页面需要在文档头部加上meta视口元素，视口标签可以告诉浏览器网页的纬度和缩放程度是什么。为了提供最好的用户体验，移动端的浏览器会按照桌面端的屏幕宽度来渲染页面（通常是980px左右，这个值会根据设备的不同有所浮动），为了更容易地阅读页面，字体会相应的加大，内容也会有所缩放来适应屏幕。对于用户来说，这么做的结果就是页面上的字体可能忽大忽小，还可能需要双击或者捏动缩放屏幕
复制链接

扫一扫

专栏目录