一、rem单位

rem是一个相对单位, 类似于em , em表示的是父元素字体大小
rem的基准是相对于html元素的字体大小

比如 , html设置font-size=12px, 非根元素设置width:2rem; 则表示24px.

二、媒体查询

媒体查询可以针对不同的屏幕尺寸设置不同的样式.

语法

@media mediatype and|not|only (media feature) {CSS-Code;
}

参数

mediatype : 媒体类型
关键字 : and not only
media feature : 媒体特性, 必须由小括号包含

媒体类型

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

all : 用于所有设备
print : 用于打印机和打印预览
screen : 用于电脑屏幕, 平板电脑, 只能手机等.

关键字

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

and : 可以将多个媒体特性连接到一起.
not : 排除某个媒体类型
only : 指定某个特定的媒体类型.

媒体特性

每种媒体类型都具有各自不同的特性, 可以根据不同媒体类型的媒体特性设置不同的展示风格.

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

案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 屏幕大小  小于等于800px的时候 */@media screen and (max-width: 800px) {body {background-color: red;}}</style>
</head><body></body></html>

移动端布局 - rem布局相关推荐

flex 移动开发 html5,[ html5 ] 移动端适配方案 flex布局+rem布局
viewport视口 viewport是严格的等于浏览器的窗口.viewport与跟viewport有关的meta标签的关系,详细建议读一读这篇文章:移动前端开发之viewport的深刻理解,view ...
移动端开发——rem布局
目录前言一.rem布局二.rem的基础知识三.媒体查询 1.媒体查询的使用语法 (一)mediatype 媒体类型 (二)关键字 (三)媒体特性 2.媒体查询和rem组合 3.引入样式四.适 ...
移动端（rem布局--苏宁易购）
技术栈:rem布局+less预处理+flex布局 html文件: <!DOCTYPE html> <html lang="en"><head>& ...
6.移动端布局-rem布局
1.rem基础优点:可以通过修改html里边文字的大小来改变页面中其他元素的大小,可以实现整体控制 1.1 rem单位 rem(root em)是一个相对单位,类似于em. em是相对于自身元素字体 ...
rem布局 html,移动端h5之rem布局／px2rem
rem布局之媒体匹配最早的时候用的rem适配方法,通过手动设置媒体查询对不同设备进行设置font-size // 自适应 // ------------------------ html{ font ...
手机端页面自适应解决方案—rem布局
相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是flex),也都能获得不错的效果,这里主要介绍的是本人在实践中用的最顺手最简单的布 ...
移动端页面自适应解决方案—rem布局(进阶版)
之前的一篇<手机端页面自适应解决方案-rem布局>随着时间的推移,该方案已然过时,故为大家介绍一个目前我极力推荐使用的,更加完美的方案--rem布局(进阶版) 该方案使用相当简单,把下面这 ...
移动端页面自适应解决方案—rem布局
移动端页面自适应解决方案-rem布局参考文章: (1)移动端页面自适应解决方案-rem布局 (2)https://www.cnblogs.com/Vayne-N/p/6903590.html 备忘一 ...
第130天：移动端-rem布局
一.关于布局方案当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...

移动端布局 - rem布局

文章目录

一、rem单位

二、媒体查询

语法

参数

媒体类型

关键字

媒体特性

案例

移动端布局 - rem布局相关推荐

最新文章

热门文章