媒体查询 rem布局【微重点】案例

最新推荐文章于 2022-07-28 16:15:29 发布

但行好事wlw

最新推荐文章于 2022-07-28 16:15:29 发布

阅读量794

点赞数 4

分类专栏：移动端开发文章标签： css3 css html

本文链接：https://blog.csdn.net/egg_er/article/details/121267550

版权

移动端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

rem布局

经过之前聊得流式布局，以及flex布局。今天我们聊聊rem布局，怎么做呢？一共两种适配方式：

第一种：（less , 媒体查询，rem）分三布就okk。

确定你的项目的页面宽度分成多少等份
利用媒体查询设字体大小
量出你设计图上的宽高，除以字体大小，单位为rem。

这样设计以后你设计的页面就可以实现多尺寸大小自适应的效果啦。

（利用上面的思路做个自适应块儿）

	// 结构
<body>
    <header class="header">					
    </header>
</body>

以下是使用媒体查询定义了一些市场上常用的屏幕尺寸。在写样式之前，先定义媒体查询。
（tips:把媒体查询放到common文件中，方便其他页面公共的调用）

//如果在普通的大小浏览器打开字体大小那就是设置成50px直接写死
html{
    font-size: 50px;
}

// 第一步：定义屏幕分成了多少份   15份
@number : 15;
// 第二步通过媒体查询添加不同尺寸的屏幕大小，从而算出字体大小
// 320的屏幕
@media screen and  (min-width:320px){
    html{
        font-size: (320px / @number);
    }
}
// 360的屏幕
@media  screen and (min-width:360px) {
    html{
        font-size: (360px / @number);  // 字体大小等于屏幕宽度除以屏幕划分的份数
    }
}
// 375的屏幕   是iPhone678的大小
@media  screen and (min-width:375px) {
    html{
        font-size: (375px/ @number);  // 字体大小等于屏幕宽度除以屏幕划分的份数
    }
}
// 384的屏幕
@media  screen and (min-width:384px) {
    html{
        font-size: (384px / @number);  // 字体大小等于屏幕宽度除以屏幕划分的份数
    }
}
// 400的屏幕
@media  screen and (min-width:400px) {
    html{
        font-size: (400px / @number);  // 字体大小等于屏幕宽度除以屏幕划分的份数
    }
}
// 414的屏幕
@media  screen and (min-width:414px) {
    html{
        font-size: (414px / @number);  // 字体大小等于屏幕宽度除以屏幕划分的份数
    }
}
// 424的屏幕
@media  screen and (min-width:424px) {
    html{
        font-size: (424px / @number);  // 字体大小等于屏幕宽度除以屏幕划分的份数
    }
}
// 480的屏幕
@media  screen and (min-width:480px) {
    html{
        font-size: (480px / @number);  // 字体大小等于屏幕宽度除以屏幕划分的份数
    }
}
// 540的屏幕
@media  screen and (min-width:540px) {
    html{
        font-size: (540px / @number);  // 字体大小等于屏幕宽度除以屏幕划分的份数
    }
}
// 720的屏幕
@media  screen and (min-width:720px) {
    html{
        font-size: (720px / @number);  // 字体大小等于屏幕宽度除以屏幕划分的份数
    }
}
// 750的屏幕
@media  screen and (min-width:750px) {
    html{
        font-size: (750px / @number);  // 字体大小等于屏幕宽度除以屏幕划分的份数
    }
}

在index.less文件中书写以下代码，在写样式代码之前，要先导入之前写好的媒体查询common.less文件。

// 导入媒体查询的文件。
@import "common";
//第三步，在这里写样式，把宽高都设置成rem
// 先确定版心body    由于我们写的是主页，我们期望用最宽的屏幕宽度来做。根据common文件中我们设计的，最大宽度为750px
body {
  min-width: 320px;     // 设置一个最小宽度。防止浏览器一直缩小
  width: 15rem;            // 此时的宽度就不能用px了，此时用rem,公式为： 总宽度750px 除以  最大的字体大小 50px 
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  background-color: #F2F2F2;
}
@baseFont : 50;     // 声明本页面的字体大小
.header{
	width: 15rem;    // 由于最大宽度那就是和版心一样宽，上面body中是15rem，因此我们这里也是15rem，保持一致
  	height: 1.76rem;   // 高度由于是88px,因此我们在less文件中使用这句话height:(88rem / @baseFont);  那@baseFont是什么呢？就是这个页面的字体大小，当然我们需要另外声明一下。
  	background-color: rgb(64, 150, 56);   // 方便我们看见盒子
}

如图：
在这里插入图片描述

换成iPhone678看看效果：
在这里插入图片描述
此时我们就配置完成了，可以开心的写代码啦。

tips:

less中算字体大小的时候如果计算不出来，说明是less的语法出现了问题，一般情况下版本可以的话是可以直接除的font-size: 414px / @number;，如果css文件的结果没有变化，那就加个（）包裹起来就okk啦。font-size: (414px / @number); 设置版本的问题哦。不要质疑自己。
虽然你在某个页面中定义了字体大小，这个字体大小的作用仅仅是为了好让你计算，也方便后期维护，当页面缩小或者扩大的时候字体大小是会随之改变的。

第二种：(flexible.js rem)[更加高效]

什么是flexible.js呢？

flexible是淘宝手机团队设计出的高效移动端适配库

有哪些特点？

我们不用再写那么多媒体查询了。
他的原理是将页面分成十等份，但是在不同设备下，比例还是一致的。我们要做的就是确定好当前设备的html的文字大小就okk啦。（比如：设计稿是750px的，那么我们只需要把html的font-size设计成(750px/10)）就行啦，也即是75px,那么页面元素怎么算呢？很简单就是(页面元素大小px值/75),利用cssrem插件完成px到rem的转换。

flexible.js的下载地址：https://github.com/amfe/lib-flexible

文件也引入了，现在又有了新的问题，元素的大小怎么从px转到rem呢？这都不用less了，有办法的。使用vscode中的cssrem插件，非常的好用，直接转换。解决了我们不适用less也可以实现转换的功能。tips:这个插件的根文字大小为font-size:16px; 在这里插入图片描述

很显然我们设计的根字体大小是font-size是75px,因此我们要找到cssrem插件改他的font-size值调成我们需要的值即可，在这里调成75px.即可，接下来就可以快乐的敲代码啦…

区别在哪里？：
第一种是临时算font-size:的大小，第二种是直接算好，利用插件，直接用。

tips: 我们做的是移动端，但是是在pc端开发的，所以会遇到浏览器的宽度大于我们版心的最大宽度，这个时候我们要使用媒体查询，给他设置一下，如果大于body的max-width给它的font-size:设置成我们版心的字体大小就行啦。

在这里插入图片描述

但行好事wlw

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
媒体查询 rem布局【微重点】案例

rem布局经过之前聊得流式布局，以及flex布局，今天我们聊聊rem布局，怎么做呢？其实分三布就可以啦。确定你的项目的页面宽度分成多少等份利用媒体查询设字体大小量出你设计图上的宽高，除以字体大小，单位为rem。这样设计以后你设计的页面就可以实现多尺寸大小自适应啦。（利用上面的思路做个自适应块儿） // 结构<body> <header class="header"> </header></body>
复制链接

扫一扫