移动WEB开发基础~~rem适配布局

最新推荐文章于 2024-04-05 17:38:08 发布

自学之路←_←

最新推荐文章于 2024-04-05 17:38:08 发布

阅读量568

点赞数

分类专栏： HTML 文章标签：媒体查询 less rem html5 css3

本文链接：https://blog.csdn.net/qq_43636251/article/details/108141787

版权

HTML 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

文章目录

1. rem基础

rem (root em) 是一个相对单位，类似于em, em是父元素字体大小;
不同的是rem的基准是相对于html元素的字体大小;
rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小，达到整体控制的效果

	/* 根html 为 12px */
	html{
		font-size:12px;
	}
	/* 此时div的字体大小就是 24px */
	div{
		font-size:2rem;	
	}

2. 媒体查询

2.1 什么是媒体查询

媒体查询 (Media Query) 是CSS3新语法

使用 @media 查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到媒体查询

2.2 语法规范

	/*
	 * 1. 用@media 开头 注意@符号
	 * 2. mediatype 媒体类型
	 * 3. 关键字 and ont only
	 * 4. media feature 媒体特性 必须有小括号包含
	 */
	@media mediatype and|ont|only (media feature)
	{
		CSS-Code;
	}
	/* 常用的语法 */
	@media screen and (min-width:320px)
	{
		html{
			font-size:21px;
		}
	}

2.2.1 mediatype 查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

值	说明
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等

2.2.2 关键字

关键字将媒体类型或多个媒体特征连接到一起做为媒体查询的条件.

值	说明
and	可以将多个媒体特性连接在一起，相当于"且"的意思<f/ont>
ont	排除某个mm媒体类型，相当于“非”的意思，可以忽略
only	指定某个特定的媒体类型，可以忽略

2.2.3 media feature 媒体特征

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同.的展示风格。我们暂且了解三个。注意他们要加小括号包含.

值	说明
width	定义输出设备中页面可见区域的宽度
min-width	定义输出设备中页面最小可见区域的宽度
max-width	定义输出设备中页面最大可见区域的宽度

2.3 引入资源文件

当样式繁多时，可以针对不同的媒体使用不同的stylesheet；
原理就是直接在link中判断设备的尺寸，然后引用不同的css文件。

	/* 当屏幕大小最小宽度为 320时，引用“style320.css” */
	<link rel="stylesheet" href="css/style320.css" media="screen and (min-width: 320px)">
	/* 当屏幕大小最小宽度为 640时，引用“style640.css” */
	<link rel="stylesheet" href="css/style640.css" media="screen and (min-width: 640px)">