移动端页面布局方式，简单记录一下

已于 2022-07-01 14:48:26 修改
阅读量3.8k 收藏 32
点赞数 1
分类专栏： 前端学习笔记 文章标签： 前端 web app 小程序
于 2021-12-01 12:44:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55935744/article/details/121600430
版权

目录

1、视口

视口就是浏览器显示页面=内容的屏幕区域
视口分为布局视口、视觉视口、理想视口

①三种视口介绍
（1）布局视口（了解）

  • 用于早期的PC端页面在手机上显示的问题
  • 这个视口分辨率设置基本为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页

（2）视觉视口（了解）

  • 视觉视口就是用户正在看到的网站的区域

（3）理想视口

  • 为了使网站在移动端有理想的浏览和阅读宽度而设定
  • 理想视口对设备来讲，是最理想的视口尺寸
  • 需要手动添加meta视口标签通知浏览器操作

②meta视口标签
（1）主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，布局的视口就多宽。
（2）语法：meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
在这里插入图片描述
（3）标准的viewport设置

  • 视口宽度和设备保持一致
  • 视口的默认缩放比例1.0
  • 不允许用户自行缩放
  • 最大允许的缩放比例1.0
  • 最小允许的缩放比例1.0
2、多倍图

①物理像素和物理像素比

  • 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。
  • 开发时的1px不是一定等于1个物理像素的
  • PC端页面，1px等于1个物理像素的，但是移动端不一定
  • 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
  • PC端和早期的手机屏幕：1CSS像素 = 1物理像素的，后来，Retina（视网膜屏幕）一种显示技术，可以把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

②多背图

  • 对于一张50px*50px的图片，在手机Retina屏幕中打开，按照上面的物理像素比放大倍数，这样会造成图片模糊
  • 在标准的viewport设置中，使用倍图来提高图片网站质量，解决在高清设备中的模糊问题。
  • 通常使用二倍图，也有3倍图、4倍图…看实际开发
  • 背景图片注意缩放问题，例如如果使用二倍图，就要将大一倍的图缩小：
    在这里插入图片描述
    background-size:参数该属性规定背景图片的尺寸
    参数：
    （1）写两个参数：就分别表示宽和高
    （2）只写一个参数，就表示宽，高就省略了
    （3）cover：高宽等比例拉伸，拉伸到完全覆盖盒子位置
    （4）contain：高宽等比例拉伸，当宽度或高度铺满盒子就不再进行拉伸了，可能有空白部分
3、移动端开发选择

①单独制作移动端页面
②响应式兼容PC端

4、移动端技术解决方案

①移动端浏览器基本以webkit内核为主，可以放心使用H5标签和C3样式。

②CSS初始化
移动端CSS初始化推荐使用normalize.css/

  • 保护了有价值的默认值
  • 修复了浏览器的bug
  • 是模块化的
  • 拥有详细的文档

官网：http://necolas.github.io/normalize.css/

③移动端中的盒子模型
在移动端中盒子模型用的是box-sizing，与传统的content-box盒子模型相比，box-sizing中的padding和border不会撑大盒子了
在这里插入图片描述
在这里插入图片描述

④特殊样式
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

5、移动端常见布局

①单独制作移动端页面

  • 流式布局（百分比布局）
  • flex弹性布局（强烈推荐）
  • less+rem+媒体查询布局

②响应式兼容PC端

  • 媒体查询
  • bootstarp
6、流式布局

①流式布局就是百分比布局，也称为非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。

为了保护内容不因为过分伸缩被破坏，可以加两个属性：
max-width 最大宽度（max-height 最大高度）
min-width 最小宽度（min-height 最小高度）

②开发前准备工作
（1）设置视口标签
（2）移动端CSS初始化
推荐使用normalize.css/
在这里插入图片描述

③二倍精灵图做法
（1）先把精灵图等比例缩放为原来的一半
（2）之后根据大小测量坐标
（3）background-size中也要写精灵图原来的一半

7、flex弹性布局
①flex与传统布局比较

传统布局：

  • 兼容性好
  • 布局繁琐
  • 局限性，不能再移动端很好的布局

flex弹性布局

  • 操作方便，布局极为简单，移动端应用广泛
  • PC端浏览器支持情况较差

建议：
1、如果是PC端页面布局，我们还是传统布局
2、如果是移动端或者不考虑兼容性问题的PC端页面布局ÿ

最低0.47元/天 解锁文章
东篱_Y
关注
  • 1
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
移动端页面布局
小王的博客
07-29 2806
流式布局、弹性盒布局、媒体查询、Rem布局、Sass
移动端常见布局方式(流式布局、flex弹性布局、less+rem+媒体查询、Bootstrap)
xy_is_fhh的博客
12-11 3410
一：单独制作移动端页面 1.流式布局(百分比布局) · 流式布局，就是百分比布局，也称为非固定像素布局 · 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。 · 流式布局方式是移动端web开发使用的比较常见的布局方式。 · max-width 最大宽度(max-height 最大高度) · min-width 最小宽度(min-height 最小高度) 演示 ???? <!DOCTYPE html> <html lang="en.
移动端常见布局
qq_62617602的博客
07-10 879
本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。所以，我们需要把我们的less文件，编译生成为css文件，这样我们的html页面才能使用。采用Flex布局的元素，称为Flex容器( flex container )，简称"容器"。flex是flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。将不同的终端设备划分成不同的类型，称为媒体类型。
探索优雅的移动端页面布局：HVScrollView
最新发布
gitblog_00080的博客
05-19 359
探索优雅的移动端页面布局：HVScrollView 项目地址:https://gitcode.com/SPStore/HVScrollView 在移动应用设计中，有时我们会被一些复杂的界面布局所困扰，尤其是那些融合了多个可滑动视图、垂直滚动和局部刷新功能的设计。今天，我们要介绍的是一个名为HVScrollView的开源项目，它提供了模仿微博、美团和爱奇艺等知名App界面布局的解决方案，让你轻松实现...
移动端布局
qq_47896523的博客
02-07 1609
less是一门CSS扩展语言，也成为CSS预处理器作为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性；它在CSS的语法基础上，引入了变量，Mixin，运算以及函数等功能，大大简化了CSS的编写，降低了CSS的维护成本。
js移动端日历签到页面代码.rar
06-13
这个“js移动端日历签到页面代码”提供了一种实现方式，帮助开发者创建一个用户友好的日历界面，允许用户每天进行唯一一次签到操作。下面我们将深入探讨这个主题，讲解如何利用JavaScript来构建这样的功能。 首先，...
整套移动端h5页面源码
12-09
在IT行业中，移动端H5页面源码是构建移动互联网应用的一种常见方式，尤其在电商项目中广泛应用。H5，即HTML5，是超文本标记语言的第五次重大修订，为网页开发提供了更多功能和交互性。本套源码提供了一整套移动端的...
吃透移动端 Html5 响应式布局
01-21
最近写第三个移动端 H5 的项目了，准备记录下自己在 H5 项目中的一些实践探索。移动端 H5 与 PC 端开发最大的区别之一，大概就是 响应式布局 问题。 那么下面我们来聊聊移动端响应式布局，了解他的来龙去脉，对现有...
移动端app领取优惠券页面模板
12-22
【移动端app领取优惠券页面模板】是专门为移动应用程序设计的一个组件模版，它主要用于实现用户在手机应用上方便快捷地获取和使用优惠券的功能。在移动电商、餐饮、旅游等各类应用中，优惠券功能是吸引用户、促进...
移动端H5电影售票页面模板
06-05
移动端H5电影售票页面模板是为手机用户设计的交互式网页应用，主要目的是提供便捷的在线购票服务。这种模板通常包含一系列页面，如首页、购票页、电影院选择页、帮助中心等，旨在优化移动设备上的用户体验。以下是这...
【前端】移动端布局
m0_64538862的博客
03-11 1277
移动端特点，屏幕分辨率，二倍图，百分比布局，flex布局，flex布局模型，主轴对齐方式，侧轴对齐方式，flex属性
视口总结
weixin_45086085的博客
05-28 833
视口又称为虚拟容器，即viewport。移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的区域。视口的宽度是人为规定的，默认为980px，我们可以通过meta标签修改视口的宽度，只要设置好视口的大小，页面内容在手机上就不会被压缩。 视口分为layout viewport，visual viewport，ideal viewport三种，layout viewport 又称为布局视口，在移动设备上，布局视口会远大于设备的宽度，visual viewport即视觉视口，是用户看到的区域，缩放可以
WEB移动端布局
qq_61368886的博客
12-08 664
在遗忘的时候可以快速的查看文档！
移动端之rem+flexible.js布局
fine1998_的博客
05-29 1958
前言 今天粉丝涨到100了，总之感谢大家的关注！ 最近在学习移动端的页面布局，用的技术方案是rem+flexible.js，这篇文章就带大家一起感受下它的魅力吧~ 一、移动端简介 1、什么是移动端布局 移动端布局，顾名思义，就是html在手机（或者ipad）上显示的页面布局。与PC端不同在于，需要适配各种移动端的不同屏幕尺寸（采用移动端布局技术方案），并且只需要处理webkit内核浏览器即可（兼容性好）。 2、视口 视口（viewport)就是浏览器显示页面内容的屏幕区域。视口分为布局视口、视
布局视口、视觉视口和理想视口
qq_40685439的博客
10-17 943
布局视口：指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度 视觉视口：指用户正在看到的网站的区域，区域的宽度=移动设备的浏览器窗口的宽度 理想视口：布局视口的大小和屏幕宽度一样的。 ...
【移动端网页布局】移动端网页布局基础概念 ⑪ ( 移动端布局方式 | 流式布局 | 弹性布局 | 媒体查询布局 | Webkit 样式初始化 | 引入初始化样式文件 | CSS 特殊样式处理 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-24 446
一、移动端常见布局 二、Webkit CSS样式初始化 1、引入 normalize.css 样式文件 2、取消链接点击时的高亮效果 3、禁用长按弹出菜单 4、取消按钮的自定义样式 5、完整代码示例
移动端页面适配
m0_74331160的博客
12-06 2933
一、移动端页面适配 二、0 适配 三、等比缩放 四、相对单位：em、rem、vw、vh
vue 移动端 仿照聊天记录的时间显示 今天 昨天 页面布局代码
04-20
抱歉，由于您的问题涉及到技术问题，我可以为您提供相关的帮助和解答。以下是一个可能的示例代码，以实现类似于聊天记录的时间显示“今天”或“昨天”在移动端的Vue页面布局： <template> <div> <div v-for="(record, index) in chatRecords" :key="index"> <div>{{ record.content }}</div> <div>{{ formatDate(record.timestamp) }}</div> </div> </div> </template> <script> export default { data () { return { chatRecords: [ { content: 'Hello!', timestamp: new Date() }, { content: 'Hi there!', timestamp: new Date(Date.now() - 86400000) // 24 hours in milliseconds (yesterday) }, { content: 'How are you?', timestamp: new Date(Date.now() - 172800000) // 48 hours in milliseconds (2 days ago) } ] } }, methods: { formatDate (timestamp) { const today = new Date() const date = new Date(timestamp) if (date.getDate() === today.getDate()) { // if today return '今天 ' + this.formatTime(date) } else if (date.getDate() === today.getDate() - 1) { // if yesterday return '昨天 ' + this.formatTime(date) } else { return this.formatDateAndTime(date) } }, formatTime (date) { const hours = date.getHours().toString().padStart(2, '0') const minutes = date.getMinutes().toString().padStart(2, '0') return `${hours}:${minutes}` }, formatDateAndTime (date) { const year = date.getFullYear().toString() const month = (date.getMonth() + 1).toString().padStart(2, '0') const day = date.getDate().toString().padStart(2, '0') const time = this.formatTime(date) return `${year}-${month}-${day} ${time}` } } } </script> 请注意，此示例仅仅是一个演示，您需要根据实际情况进行适当的修改和调整，以实现您的业务需求。如果您需要更多的帮助和指导，请不要犹豫联系我或其他开发者和技术专家。谢谢！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东篱_Y

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值