CSS 移动端内容总结(三)rem适配布局

最新推荐文章于 2023-04-04 16:20:28 发布

辛跃

最新推荐文章于 2023-04-04 16:20:28 发布

阅读量449

点赞数 1

文章标签： html5 html css css3

本文链接：https://blog.csdn.net/qq_47735503/article/details/114503879

版权

CSS 内容总结

1.rem基础

rem（root em）是一个相对单位，类似于em，em是相对于父元素字体大小。

不同的是rem的基准是相对于html元素的字体大小

比如：html：设置font-size=12px，非根元素设置width：2rem，则换成px表示就是24px

2.媒体查询

Media Query 是CSS3新语法

@media 可以针对不同的屏幕尺寸设置不同的样式

语法规范

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

用@media开头注意符号

mediatype媒体类型

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

关键字and not only

关键字	说明
and	可以将多个媒体特性连接到一起，相当于“且”的意思
not	排除某个媒体类型，相当于“非”的意思，可以省略
only	指定某个特定的媒体类型，可以省略

media feature 媒体特性必须有小括号包含

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

  <style>
   @media screen and (max-width:500px) {
   
      body {
   
        background-color: rgb(159, 185, 64);
      }
    }
    @media screen and (max-width:800px) {
   
      body {
   
        background-color: rgb(224, 54, 54);
      }
    }
  /* 从小到大写 */
  </style>

媒体查询+rem案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge

最低0.47元/天解锁文章

辛跃

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS 移动端内容总结(三)rem适配布局

CSS 内容总结1.rem基础2.媒体查询3.Less基础4.rem适配方案5.苏宁首页1.rem基础rem（root em）是一个相对单位，类似于em，em是相对于父元素字体大小。不同的是rem的基准是相对于html元素的字体大小比如：html：设置font-size=12px，非根元素设置width：2rem，则换成px表示就是24px2.媒体查询Media Query 是CSS3新语法@media 可以针对不同的屏幕尺寸设置不同的样式语法规范@media mediaty
复制链接

扫一扫