网站首页 > 技术文章 正文
一、什么是移动端适配
移动端 Web 页面,就是常说的手机 h5页面、webview页面、公众号开发的网页等。
由于手机机型较多,各个手机的屏幕尺寸不一样,所以做移动端页面,需要考虑在安卓和ios的各种尺寸设备的兼容问题,我们要做的 web 页面适配,就是为了在不同设备上,页面能够保持统一展示效果,或等比缩放。
二、移动适配方案
常见的移动适配方案有以下几种:
- viewport
- 盒模型
- flex
- rem
2.1、viewport - 可视区
最初手机端需要照顾 PC 端,如果不设置 viewport,直接访问网页的时候,我们发现网页内容看着很小,这是因为页面按照PC端最小宽度980展示的,也就是我们的网页宽度就是980,而手机屏幕宽度通常375、411、320、414等,没有980那么大,所以页面被缩小了很多。
设置viewport
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
user-scalable=no,
minimum-scale=1.0
maximum-scale=1.0"
分别对 meta 的各个属性介绍如下:
- width - 设置viewport的宽度,为一个正整数,或字符串‘device-width’
- initial-scale - 设置页面的初始缩放值,是一个数字,可以是小数
- maximum-sacle - 设置页面最大缩放值,是一个数字,可以是小数
- user-scalable - 是否允许用户进行缩放,值为'yes'或者'no',yes表示可缩放,no表示禁止缩放
- minimum-scale - 允许用户缩放的最小值,是一个数字,可以是小数
- height - 设置layout viewport的高度,这个属性很少使用
一般情况下禁止用户缩放网页,设置的时候只需要:
<meta name="viewport"
content="width=device-width, initial-scale=1.0 , user-scalable=no" >
就可以了,但是由于某些浏览器不能识别 initial-scale,所以添加了最大和最小缩放限制。
viewport 设置可视区之后,就会把网页的宽度设置为移动设备的屏幕宽度。
如想深入学习,可查阅《viewport深入理解和使用 - 前端人 - 博客园》。
2.2、盒模型
CSS3 中新增 box-sizing 属性,可以设置盒模型类型。属性值分别为:
content-box - 标准模型
border-box - IE模型
两者最大区别就是盒子的宽度不同:
标准模型宽 = 内容宽 + padding + border
IE模型宽 = 内容宽(包含padding、border)
这样做的优点就是可以任意设置它的 padding 和 border,不会挤压盒子的排列,但是如果设置一个 margin,会立马改变盒子的排列。
如想深入了解,可查阅《前端面试题中的“盒模型”是什么?》
2.3、flex - 弹性布局
Flex 是 Flex Box 的简写,意为弹性布局,为盒子提供最大的灵活性。任何一个元素都可以指定为弹性布局。
使用语法:
.box{
display:-webkit-flex;
display:flex;
}
采用 flex 布局的,也称 flex 容器,对应的属性有:
- flex-direction 设置排列方向(向下、向上、向左、向右)的
- flex-wrap 内容放置不下时换行方式
- flex-flow 是flex-direction和flex-wrap属性简写默认值row nowrap
- justify-content 定义在主轴上的对齐方式。
- align-items 定义项目在交叉轴上如何对齐。
- align-content 定义多根轴线的对齐方式
容器内的子元素增加,布局所占的系数:如:
<div class="box">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
//其样式为
.box{
display:-webkit-flex;
display:flex;
}
.child{
flex:1;
background:#eee;
height:100px;
border:solid 1px red;
}
此时我们给 child 不论如何设置边框、内边距,还有外边距,三个 child 始终排列在一行。
flex 布局优点:
- 可以实现 border-box 的效果。
- 添加弹性布局之后,元素不需要再使用浮动,清除浮动等。
- 同行元素设置边框、内外边距均不影响同行排列。
- 还可使用 max-width、min-width 或固定宽度与 flex 配合使用,另一边可自动填充功能。
不设置其他属性的时候,弹性布局默认水平方向从左排列,还可以通过属性控制垂直方向布局,对齐方式等,可以点击《flex布局制作自适应网页 - 前端人 - 博客园》详细学习。弹性布局超强大,应用也非常广泛。
2.4、rem
rem是一种相对单位。长度单位可分为两种:相对单位和绝对单位。
绝对单位:长度是固定的值,反应物理真实尺寸。如:px像素,一个像素相当于我们屏幕的一个小点,屏幕实际就是由很多个像素点组成的,不同显示器像素大小不同。还有cm、mm、in等等。
相对单位:根据其参考物决定的,参照物大小改变时,它也会改变。如%、rem、em、vh、ex等等。
网页布局中我们常用到em和rem两种单位:
em - 是相对于自身的
rem - 是root em,相对于根元素的
em和rem 修改他们自身和html的font-size大小,会改变em、rem单位大小。
特点:使用rem布局时,只需要通过宽度改变html的font-size,就可以改变所有元素大小。注意的是,所有设置大小的时候都要使用rem。
建议阅读《彻底搞懂px、rem、em的区别》文章。
猜你喜欢
- 2024-11-22 预加重、去加重和均衡
- 2024-11-22 建议收藏!总结了 42 种前端常用布局方案
- 2024-11-22 springboot开源系统-解决弹框拉伸高度无法自适应问题
- 2024-11-22 自适应网站页面适配实现和基本原理讲解
- 2024-11-22 聊聊前端性能指标那些事儿
- 2024-11-22 深蓝S7——巡航控制——自适应巡航系统(ACC)2
- 2024-11-22 前端学习路径,细化分讲。加深新手对前端技术的认知
- 2024-11-22 看似简单的css宽度自适应,间距固定踩坑记
- 2024-11-22 好程序员web前端教程分享如何用CSS做响应式布局
- 2024-11-22 Web前端新手怎么入门 如何用CSS做响应式布局
你 发表评论:
欢迎- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作,推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 602℃几个Oracle空值处理函数 oracle处理null值的函数
- 594℃Oracle分析函数之Lag和Lead()使用
- 582℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 579℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 574℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 567℃【数据统计分析】详解Oracle分组函数之CUBE
- 554℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 548℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作,推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践(dataguard failover)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)