admin管理员组文章数量:1655538
rem适配布局有两种方案，一种是rem + 媒体查询 + Less技术，一种是使用 flexible.js。
方案1: rem + 媒体查询 + Less技术
方案技术简介
rem 单位
rem( root em )是一个相对单位，类似 em，em 的基准是相对于父元素的字体大小，rem 的基准是相对于根元素( html )的字体大小。
rem 的优点是可以通过修改 html 的 font-size 来改变页面元素的大小，可以实现整体控制。
媒体查询
媒体查询( Media Query )是CSS3新语法，可以针对不同的屏幕尺寸、媒体类型设置不同的样式，重置浏览器大小的过程中，会根据浏览器的宽高重新渲染，目前很多苹果手机、安卓手机、平板等设备都用得到多媒体查询。
语法：
@media mediatype and|not|only (media feature){
CSS CODE;
}
-
常见的 mediatype：all(所有设备) ，print(打印机和打印预览)，screen(电脑屏幕/平板电脑/智能手机)
-
and 连接，not 排除，only 特指，not 和 only 都可省略
-
常见的 media feature：width / min-width / max-width，定义输出设备中页面(最大/最小)可见区域的宽度
-
媒体查询一般按照从大到小或者从小到大的顺序来，从小到大写会更简洁
-
max-width 和 min-width 都是包含等于的
案例：媒体查询+rem实现元素动态大小变化
设置 html 的 font-size，div 的 font-size / height 单位为 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: white;
text-align: center;
line-height: 1rem;
}
</style>
<body>
<div class="top">购物车</div>
</body>
媒体查询引入资源
当样式比较繁多的时候，可以针对不同的媒体使用不同的样式表( stylesheets )，原理就是直接在 link 中判断屏幕的尺寸，调用不同的 css 文件。
例如，屏幕尺寸 >=640px，div 一行显示两个，320px <=屏幕尺寸< 640px，div 一行显示一个，就这样引入样式表：
<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">
Less技术
CSS 的弊端：CSS 是一门非程序式语言，没有变量、函数、作用域等概念，需要书写大量看似没有逻辑的代码，冗余度比较高，不方便维护及扩展，不利于复用，没有很好的计算能
版权声明：本文标题：响应式布局之rem适配布局方案 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1729706649a1210803.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论