学习CSS（2）

最新推荐文章于 2024-09-15 19:00:01 发布

花莫弦

最新推荐文章于 2024-09-15 19:00:01 发布

阅读量434

点赞数

分类专栏： HTML 文章标签： html css 响应式布局

本文链接：https://blog.csdn.net/u011822862/article/details/46823517

版权

HTML 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1.总体介绍

CSS3响应式布局，为了解决如今各式各样的浏览器分辨率以及不同移动设备的显示结果，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本，即一个页面可以在多个终端呈现出你想要的效果，能够兼容多个终端。

优点：兼容性更好，兼容多个设备。

缺点：兼容量设备工作量大，效率低，代码累赘，出现很多无用的元素，加载时间长，可能造成布局不同，辨识度出现差异。

media指媒体类型，一般的响应式布局都是通过它来完成的，其中的screen是指电脑屏幕，min-width指小于这个数值的时候，就不显示前面的css样式。

同样也可以在<style></style>中设置样式和媒体类型的属性。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content－Type" content="text/html; charset=gb2312">
<title>CSS3响应式布局</title>
<!--
<link rel="stylesheet" href="1.css" media="screen and (min-width:1000px)">
-->
<style>
  @media  screen and (min-width: 600px) {
     .one{
    border:1px solid red;
height:100px;
width:100px;
 }
  }
</style>
</head>
 
<body>
<div class="one">
</div>
</body>
</html>

2.媒体类型

值	描述
all	默认，所有
aural	语音合成器
braille	盲文反馈装置
handheld	手持设备
projection	投影仪
print	打印预览模式
screen	计算机屏幕
tv	电视类型设备

3.限定操作符

值	描述
and	逻辑与
not	逻辑非
only	限定某种设备

4.属性值

属性类型	描述
width	页面可见区域宽度
height	页面可见区域高度
device-width	屏幕可见宽度
device-height	屏幕可见高度
orientation	定义’height’是否大于或等于’width’。值portrait代表是， landscape代表否，即设备手持方向：portait为横向，landscape为竖向
acpect-ratio	定义’width’与’height’的比率，即浏览器的长宽比
device-aspect-ratio	定义’device-width’与’device-height’的比率，即设备屏幕长宽比。如常见的显示器比率：4/3， 16/9，16/10