No.2.5
移动适配
rem:目前多数企业在用的解决方案
rem:(能够使用rem单位设置网页元素的尺寸)
网页效果:屏幕宽度不同,网页元素尺寸不同(等比缩放)
px单位或百分比布局可以实现吗? px单位是绝对单位 百分比布局特点宽度自适应,高度固定
写法: @media (媒体特性) { @media (width:320px) {
选择器 { html {
CSS属性 font-size: 32px;
} }
} }
rem适配原理:(实现在不同宽度的设备中,网页元素尺寸等比缩放效果)
思考:工作中,书写代码的尺寸要参考设计稿尺寸,设计稿中是px还是rem? px
如何确定rem的数值?
计算68px是多少个rem?(假定设计稿适配375px视口) N * 37.5 = 68 ——> N = 68 / 37.5
rem单位尺寸
1.确定设计稿对应的设备的HTML标签字号
2.rem单位的尺寸
flexible.js:(使用flexible.js配合rem实现在不同宽度的设备中,网页元素尺寸等比缩放效果)
vw/vh:未来的解决方案
随机推荐
- .Net执行SQL/存储过程之易用轻量工具
支持.Net/.Net Core/.Net Framework,可以部署在Docker, Windows, Linux, Mac. 由于该工具近来被广东省数个公司2B项目采用,且表现稳定,得到良好验证 ...
- 解决RockyLinux和Centos Stream 9中firefox无法播放HTML视频问题
如题在测试两种centos后续系统时,发现firefox无法播放HTML视频问题.经过一番折腾找到了解决的办法,具体解决如下: 首先下载VLC $sudo yum install vlc 而后重启浏览 ...
- Django(2) - Django模板
1.Django模板介绍 基础概念 模板是具有一定的格式或骨架,可以动态的生成HTML 模板引擎决定以何种方式组织代码 一个项目可以有一个或者是多个模板引擎,Django里面主要两个模板引擎:DTL. ...
- GeoLayout: Geometry Driven Room Layout Estimation Based on Depth Maps of Planes
1. 论文简介 论文题目:GeoLayout: Geometry Driven Room Layout Estimation Based on Depth Maps of Planes Paper地址 ...
- 增强MybatisPlus拓展新功能 实战MybatisPlus大合集
mybatis-plus-max简介 MybatisPlusMax是MybatisPlus的增强包,秉承只拓展不修改的理念,对MybatisPlus做增强. 正如MybatisPlus是对MyBati ...
- [C++]std::sort()函数使用总结
函数声明 template< class RandomIt, class Compare > constexpr void sort( RandomIt first, RandomIt l ...
- ZROI2
题解 ZROI2 暑假集训的第二次模拟赛,成绩..更加惨不忍睹.又滑了rk20,(#`-_ゝ-)(sk) 链染色 考场上想出了半正解,思路上期望得分80pts,代码得分0pts,(我这辣鸡代码能力╯︿ ...
- TypeDB Forces 2023 (Div. 1 + Div. 2, Rated, Prizes!) A-E
比赛链接 A 题意 给一个正整数 \(n\) ,找到一组正整数 \(x,y \leq n\) ,满足 \(x^y \cdot y + y^x \cdot x = n\) . 题解 知识点:数学. 尝试 ...
- GF_CLR初始用 - 正式版
参照:DeerGF_Wolong框架使用教程 与tackor老哥的踩坑日记所编写,第二次尝试,总结第一次经验重新来. 点击链接加入群聊[Gf_Wolong热更集合] 一. 部署 HybridCLR(W ...
- k8s部署canal-1.1.6版本实现MySQL数据库数据同步
1.版本说明 软件&镜像 版本&镜像信息 说明 Kubernetes v1.23.7 k8s服务器 Kuboard v3.5.2.0 k8s连接管理工具 Canal v1.1.6 数据 ...