当前位置:
首页 > 网站开发 > JavaScript教程 >
-
rem
通过sass动态设置rem
移动端我们一般是根据iPhone6的375来进行开发的
ex:
js文件:
let htmlWidth = document.documentElement.clientWidth || document.body.cilentWidth; // 获取视窗高度 let htmlDom = document.getElementsByTagName('html')[0]; htmlDom.style.fontSize = htmlWidth / 10 + 'px'; // console.log(htmlWidth,htmlWidth / 10); //动态修改font-size window.addEventListener('resize',()=>{ let htmlWidth = document.documentElement.clientWidth || document.body.cilentWidth; let htmlDom = document.getElementsByTagName('html')[0]; htmlDom.style.fontSize = htmlWidth / 10 + 'px'; })
在vscode中编写sass文件:
@function px2rem($px) { $rem:37.5px;/* 基准值iphon6 375/10 */ @return ($px / $rem) +rem; } /* 以iPhone6 为主 设计给的尺寸要比实际大两倍 */ html{ background: #f8f8f8; } .header{ width: 100%; height: px2rem(40px); background: red; .header-content{ display: flex; justify-content: space-between; align-items: center; height: px2rem(40px); padding: 0 px2rem(23px); .header-item{ color:#ffcdce; font-size: px2rem(16px); &:nth-child(2){//&:等同于父元素 color: #fff; font-size: px2rem(17px); } } } }
最新更新
python基础教程:Python中垃圾回收和del语句
Python中的map与reduce函数简介
阿里大神总结的Python基础知识实例,超详
一个开发10年程序员论:学习Python最正确
5道趣味Python热身题【新手必学】
Python基于TCP与UDP协议实现Socket通信
安装pyinstaller库
python3_h5py_hdf5_遍历_查看文件结构
python基础学习day12 生成器与推导式
实例010:给人看的时间
用 Access+Outlook 来采集信息
使用PowerDesigner生成Access数据库
让我们一起用开源数据库和开源框架废弃
随说秋色园从Access升迁到MSSQL过程
当爬虫被拒绝时(Access Denied)
Web API与OAuth:既生access token,何生refres
[认证 & 授权] 6. Permission Based Access Co
Access之C#连接Access
oracle 19c下载和安装教程(database和client)
MySql索引原理与使用大全
php的计数器每次都会清零
PHP基础
数据类型之对象
数据类型之布尔型、整型、浮点型和字符
php教程之数据类型之数组
php教程之PHP 常量
php教程之变量
php教程之语法
PHP简介与安装
phpMyAdmin配置安装全攻略