移动端适配

最新推荐文章于 2022-07-15 21:41:29 发布

Doe

最新推荐文章于 2022-07-15 21:41:29 发布

阅读量131

点赞数

文章标签： css 媒体查询

原文链接：https://www.jianshu.com/p/43dea9fc2eb1

版权

本文详细介绍了如何通过@media查询和rem单位实现响应式网页设计。通过设置不同屏幕宽度下的html字体大小，达到按比例适配不同设备的效果。这种方法确保在不同分辨率的设备上页面元素保持视觉一致性。同时，文章还探讨了px、em和rem的区别，并给出了使用rem的示例和计算方法。

摘要由CSDN通过智能技术生成

1、@media + rem

首先，在head标签中写入一个meta标签。

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1">;

/*
    initial-scale：第一次进入页面的初始比例
    minimum-scale：允许缩小最小比例
    maximum-scale：允许放大最大比例
    user-scalable：允许使用者缩放，1 or 0 (yes or no)
*/

@media

@media screen and (min-width:350px){
    html{font-size:342%;}
}
@media screen and (min-width:360px){
    html{font-size:351.56%;}
}
@media screen and (min-width:375px){
    html{font-size:366.2%;}
}
@media screen and (min-width:384px){
    html{font-size:375%;}
}
@media screen and (min-width:390px){
    html{font-size:380.85%;}
}
@media screen and (min-width:393px){    /* 小米NOTE */
    html{font-size:383.79%;}
}
@media screen and (min-width:410px){
    html{font-size:400%;}
}
@media screen and (min-width:432px){ /* 魅族3 */
    html{font-size:421.875%;}
}
@media screen and (min-width:480px){
    html{font-size:469%;}
}
@media screen and (min-width:540px){
    html{font-size:527.34%;}
}
@media screen and (min-width:640px){
    html{font-size: 625%;}
}

@media screen and (width:720px){
    html{font-size: 703.125%;}
}
media
媒体查询，可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

上述代码中，第一个@media screen and (min-width:350px)表示当移动设备的宽度大于350px的时候页面将使用花括号内的样式，即将html根元素的字号设置为342%。(max-width:350px,则表示设备宽度小于350px时将采用此样式)。上述css代码的作用可见就是在不同分辨率的设备上设置不同的html字体大小。

为什么要这样设置呢？因为这种适配方法用的是css3的rem来进行适配的，而前面讲了，rem是相对于html的字号来计算的，现在不同的设备上html的字号改变了，也就意味这1rem代表的px像素值不同了，也就达到了按比例在不同设备上适配同一个页面的效果了。

html元素的font-size值又是怎么确定的呢？拿下面的举例：
@media screen and (min-width:375px){
    html{font-size:366.2%;}
}
屏幕宽度大于375px的会按照宽度375px来适配。设计同时平时给我们的设计稿一般是640px宽度或者750px宽度的，而我们上面的都是假定设计稿是640px宽来计算的，750px也是同理计算。现在：

屏幕宽度是375，设计稿宽度是640，ratio = 375/640=0.5859375;
我们要将设计稿上元素用css单位rem写下来，那么该如何转换，1rem应该等于稿子上多少px。这里我们设定1rem = 100px ;可以设定其它值吗，当然可以，这里设置为100只是方便我们在写css的时候好计算，小数点直接左移两位就可以了。比如，设计稿上一个宽46px按钮，这样转换成rem直接就是0.46rem。
现在1rem代表设计稿上100px,那么又该是等于设备上最后真实的多少像素呢。就要用到前面的屏幕宽度和设计稿的宽度比 ratio,设计稿上100px代表了真实的设备100*ratio = 58.59375px。

换句话说 css中写的1rem等于设备58.59375px。又因为1rem等于1倍的html元素的font-size,所以这里的html元素的font-size最终应该设置成58.59375px。可为什么上述代码中用的是百分比呢？因为一般浏览器中html元素的默认字号都是16px，但是当用户放大或者缩小浏览器字号设置时，就不会是16px了，所以我们将html的font-size还是设置成百分比更好，即 58.59375/16= 366.2109375%,也就是上面例子中的366.2%了。

其它的屏幕上也是同此道理计算出html的font-size值的。

为什么要用rem？

和媒体查询配合，实现响应式布局

px、em、rem 有什么不同？

px是pixel（像素），是屏幕上显示数据的最基本的点，在HTML中，默认的单位就是px；em 是一个相对大小，相对于父元素font-size的百分比大小rem 是相对于根元素<html>的font-size

用法示例

1、首先在HTML中设置一个基准值，如font-size: 100px;

2、将像素值除以100（设定的基准值）计算出对应的rem的值

如果一个div的宽度为600300px ,改为rem即为6rem3rem

3、根据当前屏幕的宽度和设计稿的宽度来计算此时的HTML的font-size的值

当前手机屏幕宽度为375px，设计稿宽度为640px，375/640*100->fontsize=58.59375

链接：

移动端的3种适配方法 - 陌路y - 博客园

https://www.jianshu.com/p/43dea9fc2eb1

Doe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端适配

1、@media + rem首先，在head标签中写入一个meta标签。<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1">;/* initial-scale：第一次进入页面的初始比例 minimum-scale：允许缩小最小比例 maximum-scale：允许放大最大比例 user-scal.
复制链接

扫一扫