程序员经验分享-hwhale

HTML移动端的基本了解

2023-05-16

文章目录

前言

一、PC端与移动端的区别

PC端：

移动端：

二、视口

布局视口

视觉视口

理想视口

meta视口标签

三、二倍图

四、移动端开发选择

单独制作移动端页面(主流)

响应式页面兼容移动端(其次)

总结

前言

        分享html移动端方面的基础知识

一、PC端与移动端的区别

PC端

浏览器多样化，需要考虑兼容性的问题，传统方式布局比较繁杂

移动端

移动端浏览器大部分内核为webkit，不需要考虑兼容性的问题，且移动端可以放心使用flex弹性布局

二、视口

        视口就是显示页面内容的屏幕区域，视口可以分为布局视口(layout viewport)、视觉视口(visual viewport)、理想视口(ideal viewport)

布局视口

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

视觉视口

  • 它是用户正在看到的网站区域

  • 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局时候仍然保持原来的宽度

理想视口

  • 为了使网站在移动端有最理想的浏览和阅读尺寸而设定
  • 需要手动添加meta视口标签通知浏览器操作
  • meta视口标签的主要目的就是设备有多宽，我们布局就多宽（相当于自适应）

meta视口标签

  • <meta name="viewport" content="width=device-width,initial-sacle=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
  • width = device-width表示视口的宽度和设备保持一致
  • initial-scale表示视口默认缩放比例是1.0
  • user-scalable表示不允许用户自行缩放
  • maximun-scale表示最大允许的缩放比例
  • minimum-scale表示最小允许的缩放比例

三、二倍图

  • 简单来说就是电脑屏幕的分辨率是物理分像素，比如高清屏1920*1080就是宽1920像素，高1080像素
  • 在网页中经常用到px单位就是逻辑像素，这个像素使我们设置的
  • 在pc端上，物理像素和逻辑像素比例1:1，而在移动端(iphone6/7/8环境)上物理像素和逻辑像素是2:1
  • 就相当于pc端的布局在移动端上会被放大两倍，比如pc端一张50*50的图片在移动端环境下，会放大两倍，就变成100*100，导致图片清晰度下降。而如果放一张100*100的图片，设置宽高为50*50像素，再转到移动端后放大两倍，图片清晰度就不会下降，因为图片本身是100*100像素的
  • 在其他情况下也有多倍图，2.6倍，3倍图等，只不过二倍图比较多一些

四、移动端开发选择

单独制作移动端页面(主流)

  • 通过判断设备，如果是移动端设备打开，就跳转到移动端页面上
  • 流式布局方式（百分比布局）
  • flex弹性布局
  • less+rem+媒体查询布局
  • 混合布局

响应式页面兼容移动端(其次)

  • 通过判断屏幕来改变样式，以适用不同终端。但是制作麻烦，需要花费很大精力去调兼容性问题
  • 媒体查询布局
  • bootstrap框架

总结

以上就是讲解了html移动端方面的基本知识

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

HTML移动端的基本了解 的相关文章

  • STM32之串口传输结构体

    传输数据还可以 xff0c 上位机解析数据耽误了一个下午的时间特此来记录一下 xff01 这里将16位数据转成8位数据转发到上位机 STM32端口 这次协议帧头定义的是 0xAA 0xBB和0xFF 0xEE 0xBB确保数据的准确性 xf

  • keil教程——串口调试

    原来keil也有串口窗口 xff0c 现在就试试打印倒金字塔图形 1 程序设计 span class token macro property span class token directive hash span span class

  • 为什么飞机不悬停在天上 等地球从下方通过呢？

    我们都知道 xff0c 地球绕地轴每24小时完成一个自转周期 那么很多人可能就会这么想 xff0c 为什么飞机不直接停在天上 xff0c 等着地球自转 xff0c 然后在目的地转过来的时候 xff0c 然后再直接着陆呢 xff1f 这样不是

  • esp32FreeRTOS教程——内核分配

    Esp32 模块中已经提供了 FreeRTOS xff08 实时操作系统 xff09 固件 FreeRTOS有助于提高系统性能和管理模块的资源 FreeRTOS允许用户处理多项任务 xff0c 如测量传感器读数 xff0c 发出网络请求 x

  • （三）串口调试工具和串口下载工具的区别：ST-LINK、J-LINK、U-LINK；SWD、JTAG、SWIM

    基础知识 一 串口 xff08 1 xff09 什么是串口 xff08 2 xff09 串行接口的划分标准 同步 异步 xff08 3 xff09 Uart串口与RS232串口的区别 xff08 4 xff09 串口的用途 二 烧录方式IS

  • RTOS信号量、邮箱、队列与事件

    一 定义 信号量 xff0c 邮箱 xff0c 队列的最大不同在于它们发送的内容不同 1 信号量是一个触发信号 xff0c 也是一个计数器 xff0c 等待接收信号的任务一般只有接收到信号才可以执行 xff0c 否则任务一直暂停 xff08

  • px4|添加自己的topic并记录至日志

    用于添加自己新建的话题并保存需要的数据至日志方便后续调试分析 目录 一 新建 msg文件 二 添加 msg文件路径至CMakeLists txt 三 添加该话题至日志中 四 编译与使用 一 新建 msg文件 在工程文件目录下的msg文件夹中

  • PX4|mavros offboard控制

    在px4官网中有相关mavros的教程MAVROS Offboard control example C 43 43 PX4 自动驾驶用户指南 本文将对该教程进行复现 xff0c 并加以细节补充 首先安装mavros sudo apt ge

  • PX4|电脑端发送自定义mavros消息至飞控端（mavros二次开发

    本文将实现在电脑端利用mavros将自定义消息发送至飞控端 xff0c 并在飞控段将接受到的信息打印至日志输出 针对mavros二次开发需要对相关ros包进行源码编译 xff0c 具体步骤如下 建立工作空间 span class token

  • Fidder判断前后端的问题

    第一种情况 xff1a fiddler 在没有设置过过滤器的情况下面没有抓到请求信息 xff0c 可能是前端页面元素没有绑定事件 xff0c 也有可能是前端发生了JS 错误 xff0c 这就是前端的bug 第二种情况 xff1a 若抓取到的

  • C++中：：和：的用法

    前言 xff1a 虽然C 43 43 中 xff1a xff1a 和 xff1a 比较常见 xff0c 但是闭上眼睛回忆一下两者的用法 xff0c 但还真不一定能全部回答上来 xff0c 现在就做个总结 xff1a 1 单冒号 xff1a

  • 树莓派安装系统和ROS，并换成国内软件源。

    这里直接放出我参考的几位博主的帖子 xff1a 树莓派社区网站 xff1a 树莓派资源下载 树莓派实验室 一 安装ubuntu mate系统 在树莓派4B上安装Ubuntu Mate 20 04 和ROS 老孟 xff08 MLY xff0

  • ROS中无法定位软件包问题

    一 ROS版本不对 ROS 和ubuntu版本对应关系 二 ROS软件源有问题 类似于以下问题多半是ROS软件源不对 更换ROS软件源 在目录 etc apt sources list d中 软件源更换为中科大的软件源 deb https

  • 手机用久了就慢，卡到不行，怎么回事？三招帮你搞定！

    大家使用智能手机时 xff0c 是不是都有这样的困扰 手机用久了 xff0c 速度越来越慢 手机为什么会越来越慢 xff0c 如何才能发挥手机的最大性能 xff1f 别急 xff0c 小4妹三招帮你搞定 xff01 安卓手机提速秘笈 内存大

  • Matlab 读取txt文件指定行的数据

    方法1 方案1 filename 61 39 volume sress displace txt 39 替换为实际的文件名 line number 61 4 替换为实际的行号 打开文件并读取行 fid 61 fopen filename f

  • 树莓派从入门到放弃之VNC开机自启动和修改语言

    一 VNC开机自启动配置 使用VNCviewer连接树莓派或者使用Putty连接 xff0c 打开终端 首先编辑vncserver配置文件键入 xff1a sudo nano etc init d vncserver 复制以下代码 xff0

  • 审稿中ff是什么意思

    f 或者 ff 都是表示引用页数的 xff0c 意思是 xff1a and following page or pages 比如 36 ff xff0c 表示36页之后的页数被用作参考 如果只有1个f 90f 就表示90页和91页 refe

  • mesoscale hydrologic model (mHM) 和multiscale parameter regionalization (MPR)

    文章目录 常见问题what is mesoscale hydrologic model mHM how does the mHm model upscale the parameterswhat is the multiscale para

  • Word转PDF

    首先在投稿的时候发现上转的文件转成PDF有一些图片缺失了 xff0c 推测是图片太大的原因 xff08 但是图片并不是很大 xff0c 目前还不知道原因 x1f622 xff09 尝试使用先本地用Microsoft Print to PDF

  • 新bing/New bing配置和操作

    申请进入候补名单完成任务获得加速使用header editor插件防止跳转到国内bing使用user agent修改浏览器的ui

随机推荐

  • PCA-APCA-MLR

    全称 principal component analysis absolute principal component score multiple linear regression 原理 绝对因子分析 多元线性回归受体模型 APCS

  • partial least squares regresssion （PLSR）偏最小二乘

    适用范围 样本量很小 不是正态分布 线性回归一般需要满足正态分布 原理 使用了包括PCA 典型相关 步骤 第一步 确认主成分数量 通过交叉有效性 RMSEP图和投影重要性VIP分析进行确认 第二步 基于第一步主成分数量基础上 进行分析 第二

  • plt.subplots_adjust(wspace=0.01, hspace=0.01)

    有时候这个质量调节没有变化 xff0c 依然保留大的gaps无法remove xff0c 这个时候试着调整一下figsize参数 xff0c 将figsize调小一点

  • MODIS四天产品的差值为daily数据并进行sg滤波处理

    span class token keyword import span numpy span class token keyword as span np span class token keyword from span scipy

  • 盘点外卖订单奇葩备注：来的时候要鬼鬼祟祟

    文 观察者网 林西 外卖订单多了 xff0c 什么奇葩要求都有 虽然说偶尔也有这种备注届的暖心清流 但大部分时候 xff0c 吃货们画风清奇的备注要求 xff0c 真心要把外卖小哥折磨得昏古气 比如说 xff0c 爸爸不让吃宵夜 xff0c

  • 关于ISMN( international soil moisture network)的metadata的观测仪器后标A、B等的解释

    介绍 The ISMN is a global network of ground based soil moisture sensors that provide long term high quality soil moisture

  • python字符串前面加f是什么意思，如何表达式嵌入字符串中

    在Python中 xff0c 字符串前面加f表示使用格式化字符串 xff08 f string xff09 的方式定义字符串 使用格式化字符串 xff0c 可以将表达式或变量的值嵌入到字符串中 例如 xff0c 下面的代码演示了使用f st

  • cmap=plt.get_cmap(‘RdBu_r‘,8)#获取颜色表，出现相同色块

    cmap 61 plt get cmap RdBu r 8 获取颜色表 这是因为 最小最小和中间值设置不合理 max v 61 0 45 min v 61 0 35 对于这样的而一个例子 midpoint 61 min v 43 max v

  • 文件ctrl+z不要轻易用

    我在移动硬盘读写文件的时候 连续多次按了ctrl 43 z和ctrl 43 y 文件直接自动删除了 xff0c 回收站都找不到 恢复的文件word也无法打开 以后千万要注意及时备份文件

  • windows自定时间显示格式（将星期几调出来）

    一般的情况下是不是显示星期几的 添加红色方框中的内容

  • 拯救者三种不同模式标识+工作状态

    参考 xff1a 关于拯救者Y7000 2019 Y7000P 2019的FN 43 Q功能介绍与使用

  • python 让print函数输出在console的结果直接被下一个print函数输出的结果覆盖

    可以用于进度的展示 xff0c 不用输出很多内容 xff0c 占用console空间 span class token keyword from span sys span class token keyword import span s

  • python并行运算

    并行运算 Python有多种方法可以进行并行计算 xff0c 以下是其中几种常见的方法 xff1a 多进程 xff1a Python中的multiprocessing模块提供了多进程的支持 xff0c 可以使用Process类来创建新进程

  • python的格式str.format

    下面是一些常用的格式化规则 对齐规则 使用 lt 或 gt 分别表示左对齐 居中对齐和右对齐 宽度规则 使用一个整数表示输出结果的宽度 精度规则 使用 加一个整数表示浮点数的小数点后的位数 类型规则 使用一个字符来指定输出结果的类型 常用的

  • apt 和 apt-get 区别

    文章目录 1 apt 的由来2 apt 和 apt get 的区别3 应该使用 apt 还是 apt get xff1f 1 apt 的由来 Ubuntu Linux Mint和elementary OS 等发行版的 Linux 均是基于D

  • 你是我的眼：水哥王昱珩带你重新打量这世界

    水哥 王昱珩在 最强大脑 舞台上凭借着 微观辨水 一战成名 在节目中 xff0c 他以1秒四杯的速度从520杯同质同量同水源的水中 xff0c 迅速找出了之前被随机选中的那杯 xff0c 甚至看出了这杯水从被选中拿起观察再到放回原位 xff

  • 性能优化与内存优化

    性能优化 主要以这四个方向进行优化 xff1a 稳定流畅耗损apk 瘦身 稳定 避免内存溢出异常捕获反馈机制 流畅 卡顿的原因 xff1a 布局复杂动画过多View 的过度绘制UI 耗时操作频繁 GC 耗损 减少没必要的网络访问或合并相关网

  • （2）工作空间

    工作空间 特点创建工作空间编译添加环境变量 特点 1 工作空间的主要作用是存放工程文件和文件代码 xff08 存放工作空间和代码的一个文件夹 xff09 2 ROS的开发依赖于工作空间 3 编写源代码 编译都是在工作空间下完成的 4 一般工

  • 工程伦理 清华大学 MOOC 期末答案 2020冬

    前言 xff1a 答案是本人自己查阅 不保证其完全正确性 xff0c 仅供参考 点个赞再走呗 xff1a xff09 1 单选题 1分 以下不属于安全文化的核心的是 D A 人的安全知识 B 人的安全意识 C 人的安全技能 D 人的安全装备

  • HTML移动端的基本了解

    文章目录 前言 一 PC端与移动端的区别 PC端 xff1a 移动端 xff1a 二 视口 布局视口 视觉视口 理想视口 meta视口标签 三 二倍图 四 移动端开发选择 单独制作移动端页面 主流 响应式页面兼容移动端 其次 总结 前言 分

热门标签