移动端适配方案

最新推荐文章于 2024-04-15 14:00:48 发布

猪痞

最新推荐文章于 2024-04-15 14:00:48 发布

阅读量275

点赞数

文章标签： css3 css html

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/apple_51597694/article/details/122281902

版权

为什么要适配移动端？

一个项目一般拥有移动端和pc端的产品图
我们为了减少工作量会在开发pc端时同时使它适配移动端

如何适配移动端

单位

在进行移动端适配的时候我们首先要考虑到元素单位的设置

相对单位
- %: 百分比
- em: Element meter 根据文档字体计算尺寸
- rem: Root element meter 根据根文档（ body/html ）字体计算尺寸
- ex: 文档字符“x”的高度
- ch: 文档数字“0”的的宽度
- vh: View height 可视范围高度
- vw: View width 可视范围宽度
- vmin: View min 可视范围的宽度或高度中较小的那个尺寸
- vmax: View max 可视范围的宽度或高度中较大的那个尺寸
绝对单位
- px: Pixel 像素
- pt: Points 磅
- pc: Picas 派卡
- in: Inches 英寸
- mm: Millimeter 毫米
- cm: Centimeter 厘米
- q: Quarter millimeters 1/4毫米

单位使用

相对单位的使用
- %：相对于父元素宽度
```
<body>
    <div class="parent">
        <div class="children"></div>
    </div>
</body>

<style>
.parent { width: 100px }
.children { width: 50% }
</style>
```
- em:相对于当前文档对象内文本的字体尺寸而言，
  
  若未指定字体大小则继承自上级元素。
  
  以此类推，直至 body，若 body 未指定则为浏览器默认大小。
```
body {
    font-size: 14px;
}
.element {
    width: 2em;
    /* 2em === 28px */
}
```
- rem :根据根文档（ body/html ）字体计算尺寸
- vh:相对于可视范围的高度和宽度，可视范围被均分为 100 单位的 vh/vw
```
div {
    height: 10vh;
    /* 如果屏幕高度为1000px，则该元素高度为100px */
}
```
- vmin / vmax 可视范围的宽度或高度中较小/较大的那个尺寸
  
  假设屏幕高度为960px，宽度为500px
```
div {
    height:1vmax;
    width:2vmin;
}
```
  该盒子宽度为10px，高度为19.2px。
绝对单位的使用
- px:像素 px 相对于设备显示器屏幕分辨率而言
```
div {
    height:100px;
    wight:100px;
}
```
- pt:1 pt = 1/72 英寸
- pc:十二点活字（印刷中使用的），相当于我国新四号铅字的尺寸。
- in:英寸
- mm:毫米
- cm:厘米
- q:四分之一毫米

媒体查询

媒体查询故名思意，查询媒体类型来进行不同的操作

语法

@media screen and (max-width: 300px) {
    样式表
}

screen为媒体类型
max-width为媒体功能

使用手册

[传送门](CSS 媒体查询 (w3school.com.cn))

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。