8.28_rem布局

最新推荐文章于 2024-02-08 08:57:49 发布

贤余

最新推荐文章于 2024-02-08 08:57:49 发布

阅读量339

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/fdcsdn_/article/details/107710279

版权

笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

Rem 单位

是一个相对单位类似于em em是父元素字体大小
rem只受html控制
原理：页面中只有一个html元素所以可以通过html 来定义font-size大小来改变整个页面中元素的大小达到整体的控制

/* 一般写在媒体查询中 */
html {
	font-size: 12px;
}

※媒体查询 media

媒体查询（Media Query）是CSS3新语法

当项目宽度到xxx大小后设置对应css属性

推荐从小到大写因为有就近原则覆盖性可以使代码更简洁

@media mediatype and|not|only (media feature) {
	html {
		font-size：75px；
	}
}

/* 如果文档宽度小于 300 像素则修改背景颜色(background-color): */
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

/* 如果屏幕宽度超过了750px 依旧按照750的设计稿走 不会让页面超过750px */

@media screen and (min-width: 750px) {
    html {
        font-size: 75px !important;
    }
}


/* 媒体查询的常用尺寸 */
@media screen and (min-width:1200px){ ... } /* 大型设备（大台式电脑，1200px 起） */

@media screen and (min-width:992px){ ... } /* 中型设备（台式电脑，992px 起） */

@media screen and (min-width:768px) { ... } /* 小型设备（平板电脑，768px 起） */

@media screen and (min-width:480px){ ... } /* 超小设备（手机，小于 768px） */

查询类型 mediatype

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

值	解释说明
all	所有设备
print	打印机和打印预览
scree*	用于电脑屏幕平板电脑只能手机

关键词 and/not/only

※and 将多个媒体特性链接在一起且的意思
not 排除某个媒体类型非的意思可省略
only 指定特定媒体类型可省略

常用媒体特性 media feature

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

注：

不能省略单位
用小括号包含
最小宽度：大于或等于
最大宽度：小于或等于

媒体查询+rem实现动态大小变化

<style>
@media screen and (min-width: 320px) {
    html {
        font-size: 50px
    }
}

@media screen and (min-width: 640px) {
    html {
        font-size: 100px
    }
}

.top {
    height: 1rem;
    font-size: .5rem;
    background-color: green;
    color: #fff;
    text-align: center;
    line-height: 1rem;
}
</style>

<body>
    <div class = "top">购物车</div>
</body>

理解为一个名为font-size的选择器数值单位设置了rem都可以被控制数值 font-size=盒子宽高媒体查询相当于定义了关键帧 font-size会随着用户屏幕大小来变动

媒体查询引入资源

原理：直接在link标签中判断并读取尺寸css文件输入顺序从小到大

语法：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="文件路径.css">
<!-- 实际运用 -->
<link rel="stylesheet" href="文件路径.css"  media="screen and (min-width: 320px)" >

Less基础

css弊端：代码重复代码结构差不便于维护没有计算能力

less：是css扩展语言也称css预处理器扩展了动态特性

less的特点：可以运算和嵌套自定义变量名称

基于nodejs的安装: npm install -g less

检查是否安装成功: lessc -v

基于浏览器的使用:

引入less主文件

<script src=”less.js” type =”text/javascript”></script>
<script src="cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>

引入缩写less文件

<Link rel=”stylesheet/less”  type=”text/css”  href=”style.less”/>

less文件中导入less主文件: @import "文件名"

less的变量定义

语法：@变量名:值;
使用：哪需要哪调用这个变量名

变量名命名规范：

必须有@前缀
不能包含特殊字符
不能以数字开头
大小写名称各不同
_可以？也可以

※Easy LESS 插件

作用：把less文件编译成css文件并且能和生成的css文件同步更新

使用方法：

vocode Less商店中搜索下载

将插件生成的css文件引入到所需html中

特点：

less嵌套

子元素直接写在父元素里面

伪类、伪元素用&=“且” 符号链接父元素

子代选择器:> 元素名 {
	// xxx
}

注释：// 快捷键ctrl+/

※less运算

+加 -减 *乘 /除  元素名：数值 - 50rem；
1.两个数值只有一个单位 根据那个单位为准 
2.都有单位时 并不同 以第一个单位为准
3.运算符左右用空格隔开

rem实际开发 ↓

rem适配方案1

组成：媒体查询+less+rem

面对不同尺寸屏幕页面要等比例缩放需要一个标杆根据这个比例来实现页面中dom元素的缩放这个标杆比例就是通过设计稿的预先固定的大小和划分的份数得出来的font-size

元素大小取值公式：页面元素值px / (屏幕宽度：750px / 划分的份数：自定义 15、10) = 页面元素的rem值

(屏幕宽度：750px / 划分的份数：自定义 15、10) = font-size

页面元素值px / font-size 可以使用VScode商店中的cssrem插件来协助计算

cssrem插件：px单位转换为rem单位默认的转换单位是16px 通过填入当前标准稿的font-size大小来转换rem单位

页面元素值：页面的Dom元素大小 div等一些px为单位的元素
划分份数：自定义为了方便计算常用10 15
屏幕宽度：用户可视界面宽移动端一般750px

例：

页面元素100px 屏幕宽度750px 划分10 份
font-size值为75px
页面元素1.3333rem=100px 1rem=75px

@media screen and (min-width: 320px) {
    html {
        font-size: 21.33px;
    }
}

@media screen and (min-width: 750px) {
    html {
        font-size: 50px;
    }
}

div {
    width: 2rem;
    height: 2rem;
    background-color: pink;
}

rem适配方案2 √

组成：rem + flexible.js

原理：默认划分为10份在不同设备下比例还是一致的

优点：flexible省略了各个比例下定义的媒体查询比起方案1要更加简洁页面缩放效果也更加平滑

例题

flexible是按照当前屏幕来划分十等份案例里面body设置了10rem

当前屏幕相乘之后又变回了原来的大小

/* 当屏幕宽度超过750px 还是按照750px设计稿的样式 */

@media screen and (min-width: 750px) {
    html {
        font-size: 75px !important;
    }
}

贤余

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
8.28_rem布局

Rem 单位是一个相对单位类似于em em是父元素字体大小rem只受html控制原理：页面中只有一个html元素所以可以通过html 来定义font-size大小来改变整个页面中元素的大小达到整体的控制/* 一般写在媒体查询中 */html { font-size: 12px;}※媒体查询 media媒体查询（Media Query）是CSS3新语法当项目宽度到xxx大小后设置对应css属性推荐从小到大写因为有就近原则覆盖性可以使代码更简洁@media mediaty
复制链接

扫一扫