移动web开发

article/2025/11/7 15:44:06

参考博客：
浅析移动端的视口
什么是视口
布局们
黑马程序员之flex布局

一、基础所知

  • 常见浏览器QQ浏览器、百度手机浏览器、360、谷歌浏览器等都是根据Webkit修改过来的内核，因此移动浏览器主要对webkit进行兼容。
  • 且移动端设备屏幕尺寸碎片化，但开发者无需关注这些分辨率，常用单位是px；
  • 常见的移动端开发有单独制作移动端页面（京东等） 和 响应式页面（三星等）三星
  • 三种视口：
    1.布局视口（layout viewport)

布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示;移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题

在这里插入图片描述
由图可看出是将网页进行压缩，就会造成元素很小的情况，一般默认为可以手动缩放页面。

2.视觉视口（visual viewport）

用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。

在这里插入图片描述
3.理想视口（ideal viewport)

指对设备来讲最理想的视口尺寸。采用理想视口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。

在这里插入图片描述

在理想视口情况下，布局视口的大小和屏幕宽度是一致的，这样就不需要左右滚动页面了。

在开发中，为了实现理想视口，需要给移动端页面添加标签配置视口，通知浏览器来进行处理。(手动添加meta标签来通知浏览器操作）

理想视口的值其实就是屏幕分辨率的值，它对应的像素叫做设备逻辑像素（device independent pixel, dip）。dip 和设备的物理像素无关，一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。如果用户没有进行缩放，那么一个 CSS 像素就等于一个 dip。

meta 标签

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> （标准设置）

在这里插入图片描述

二、二部图

物理像素：指屏幕显示的最小颗粒(物理真实存在的），任何设备的物理像素数量都是固定的 (也就是分辨率）
物理像素比：一个px的能显示的物理像素点的个数，在PC端一个px等于一个物理像素，但是移动端不尽相同

小历史：在早期PC端和早前手机屏幕 都是以1px = 1 物理像素的，但在Retina（视网膜屏幕）显示技术出现，可以将更多的物理像素点压缩在一块屏幕里，从而提高分辨率，显示更加细腻。

思考：由于运用了Retina技术的运用，当我们将50*50像素的图片放入移动端时，我们会发现我们的图片被放大而降低了显示的清晰度，该怎么来避免这个问题呢？

代表性的是使用二部图的方法来解决：我们准备的图片比实际需要的大小 大2倍（先放入100x100像素的图片 再手动将其缩小为50x50像素)

三、兼容性问题

再移动端开的过程中，由于设备的不统一会造成一些兼容性问题,使其达不到我们想要的效果

  1. .CSS盒子模型 [CSS盒子模型]

(https://www.w3school.com.cn/css/css3_box-sizing.asp)

box-sizing:border-box;
-webkit-box-sizing: border-box;
  1. 点击链接时出现蓝色高亮，需要消除，设置为transparent 透明
    在这里插入图片描述
 -webkit-tap-highlight-color:rgba(0,0,0,0);

在这里插入图片描述
高亮为透明；

  1. 在移动端浏览器默认的外观在ios加上这个属性才能给按钮和输入框自定义样式
-webkit-qppearance:none;
  1. 禁止长按页面时弹出菜单；
    在这里插入图片描述
img,a {-webkit-touch-callout:none;
}

更多兼容性问题

四、布局

选择单独制作移动端（主流）来开发时：

  1. 流式布局（百分比布局）
  2. flex弹性布局
  3. rem/em适配布局

选择响应式移动端来开发时

  1. 媒体查询

1.流式布局

也称百分比布局，通过盒子的宽度设置为百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充，整体布局不变。

网页中主要的划分区域的尺寸使用百分数（搭配min-、max-属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。

这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

2. Flex布局

flex在PC端兼容性较差，多用于移动端，任何元素都可以为指定为flex布局，内容参考博客

3、rem/em适配布局

rem与em 的区别： rem与em的使用和区别详解

  • rem 单位转为像素值，是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。
  • em 单位转为像素值，取决于使用其元素的字体大小。 此字体大小受从父元素继承过来的字体大小的影响，除非显式重写与一个具体单位。

思考：在这里插入图片描述
媒体查询：
在这里插入图片描述

@media mediatype and|not|only (media feature) {}

说明：

1、mediatype 查询类型

值说明
all用于所有设备
print用于打印机和打印预览
scree用于电脑屏幕、平板电脑、智能手机

在这里插入图片描述
3.媒体特性（media feature）：

值说明
width定义输出设备中页面可见区域的宽度
min-width定义输出设备中页面最小可见区域的宽度
max-width定义输出设备中页面最大可见区域的宽度

媒体查询 + rem 来实现适配布局：

 @media screen and (min-width: 320px){html {font-size: 20px;}}@media screen and (min-width: 640px){html {font-size: 40px;}}*{margin: 0;padding: 0;}.top {text-align: center;line-height: 2rem;height: 2rem;font-size: 1rem;background-color: rgb(194, 160, 226);}

<div class="top">导航栏</div>

实现在不同屏幕的情况下，元素样式发不同变化

4、响应式布局

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果 如图：
在这里插入图片描述

原理： 在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

父容器版心的常用尺寸划分

  • 超小屏幕（手机，小于 768px）：设置宽度为 100%
  • 小屏幕（平板，大于等于 768px）：设置宽度为 750px
  • 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
  • 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

Bootstrap简介： bootstrap

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

开发步骤： 起步

  1. 创建文件结构
    在这里插入图片描述
    2.创建html骨架
<!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--要求当前网页要使用ie浏览器最高版本的内核来渲染--><meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0"><!--视口的设置：视口的宽度与设备一致，默认缩放比例和PC端一致，用户不能自行缩放--><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --><!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --><!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]--></head><body><h1>你好，世界！</h1><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script></body>
</html>
  1. 引入相关样式文件
  2. 书写内容，不是简单的复制粘贴

Bootstrap 栅格系统（gridsystems)： 更多

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

栅格系统用于通过一系列的行（row） 与 列（column） 的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

在这里插入图片描述
嵌套:
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内

列偏移：
使用类可以将列向右.col-md-offset-*侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）
列排序:
通过使用 .col-md-push-* (推，相当于向右移） 和 类就可以很容.col-md-pull-*（推，相当于向左移）易的改变列（column）的顺序。

响应式工具：
针对不同设备来显示和隐藏页面内容；
在这里插入图片描述

五、web移动端页面性能优化方案


http://chatgpt.dhexx.cn/article/m4Etr5Ke.shtml

相关文章

方法重载与重写的区别

方法重载与重写的区别

1.方法重载和重写都是实现多态的方式&#xff0c;区别在于重载是编译时多态&#xff0c;重写是运行时多态。 2.重载是在同一个类中&#xff0c;两个方法的方法名相同&#xff0c;参数列表不同&#xff08;参数类型、顺序、个数&#xff09;&#xff0c;与方法返回值无关&#x…
阅读更多...
C#重载与重写的区别

C#重载与重写的区别

前言&#xff1a;在之前的博文中&#xff0c;我总结过重载与重写的区别与用法&#xff0c;本博文算是一个系统的概述与总结。 文章目录 一、重载与重写的区别二、重载与重写的特征三、重载与重写的对比 一、重载与重写的区别 重载必须在同一个类&#xff0c;重写在派生类。重…
阅读更多...
重载和重写的区别总结

重载和重写的区别总结

目录 1. 什么是重载 2. 什么是重写 3. 二者的区别 1. 什么是重载 重载&#xff08;overload&#xff09;&#xff0c;它是指我们可以定义一些名称相同的方法&#xff0c;通过定义不同的输入参数来区分这些方法&#xff0c;然后再调用时&#xff0c;VM就会根据不同的参数样式…
阅读更多...
Java之 重载 重写的区别

Java之 重载 重写的区别

方法的重写和重载是Java多态性的不同表现&#xff1b;重写是父类与子类之间多态性的一种表现&#xff0c;重载是一个类中多态性的一种表现。重载 在同一个类中&#xff0c;多个方法有相同的方法名&#xff0c;但参数列表不同&#xff0c;这种同名不同参的方法就是重载重写 子类…
阅读更多...
java中方法重载和重写的区别

java中方法重载和重写的区别

方法重载和重写&#xff0c;光从名称上来说&#xff0c;很类似&#xff0c;也很容易弄错&#xff0c;接下来我们先简述两者的区别和联系。 1. 方法重载 首先方法重载是同一个类中的不同方法间的关系&#xff0c;这些方法具有同名(方法名一样)&#xff0c;但是具有不同的参数列…
阅读更多...
重载和重写的区别（详解）

重载和重写的区别（详解）

1、方法重写 概念&#xff1a; 重写是子类对父类的允许访问的方法的实现过程进行重新编写&#xff0c;返回值和形参都不能改变。即外壳不变&#xff0c;核心重写&#xff01; 好处&#xff1a; 重写的好处在于子类可以根据需要&#xff0c;定义特定于自己的行为。 也就是说…
阅读更多...
java中重载与重写的区别

java中重载与重写的区别

重写&#xff08;Overriding&#xff09; 重载&#xff08;Overloading&#xff09; 类的数量 父子类、接口与实现类 本类 方法名称 一致 一致 参数列表 一定不能修改 必须修改 返回类型 一定不能修改 可以修改 异常 可以减少或删除&#xff0c;但不能扩展 可以…
阅读更多...
重载和重写的区别有哪些？

重载和重写的区别有哪些？

重载和重写的区别有以下几点&#xff1a; 一、定义上的区别&#xff1a; 1、重载是指不同的函数使用相同的函数名&#xff0c;但是函数的参数个数或类型不同。调用的时候根据函数的参数来区别不同的函数。 2、覆盖&#xff08;也叫重写&#xff09;是指在派生类中重新对基类…
阅读更多...
重载和重写有什么区别

重载和重写有什么区别

一、定义上的区别&#xff1a; 1、重载是指不同的函数使用相同的函数名&#xff0c;但是函数的参数个数或类型不同。调用的时候根据函数的参数来区别不同的函数。 2、覆盖&#xff08;复也叫重写&#xff09;是指在派生类中重新对基类中的虚函数&#xff08;注意是虚函数&…
阅读更多...
重载和重写区别

重载和重写区别

以下都是Java的基础面试题&#xff0c;相信大家都会有种及眼熟又陌生的感觉、看过可能在短暂的面试后又马上忘记了。JavaPub在这里整理这些容易忘记的重点知识及解答&#xff0c;建议收藏&#xff0c;经常温习查阅。 文章目录 3. 重载和重写区别10道不得不会的Java基础面试题 3…
阅读更多...
getBytes的坑

getBytes的坑

由于业务需要&#xff0c;想要获取value字符串的字节长度&#xff0c;于是用了下面方法。 int length value.getBytes().length; 发包给测试的时候&#xff0c;于是奇怪问题产生了。 测试的运行效果和我这边不一样。 1、重启服务 2、查看class确认是否正确打包 然而都没…
阅读更多...
java中bitconverter_BitConverter.GetBytes 方法以什么顺序返回字节数组

java中bitconverter_BitConverter.GetBytes 方法以什么顺序返回字节数组

前言 我在“浅谈 ZipInteger”一文中的 ZipInteger 结构中使用了 BitConverter 类的 GetBytes 方法。当时我是假设 GetBytes 方法根据 IsLittleEndian 的值不同而按照不同的顺序返回字节数组。但是 MSDN 有关 BitConverter 类的文档中没有对此作出明确的说明。请参见我在 MSDN …
阅读更多...
java Getbytes转中文,java new String getBytes 到底怎么转换字符集的问题

java Getbytes转中文,java new String getBytes 到底怎么转换字符集的问题

我们常常遇到字符集转换的问题。 我要说的当然不是网站中遇到的ISO8859-1的那个傻BUG。 实例： 目标，把一个UTF-8的中文字符串转化成GBK的字符串。 新建一个GBK的java项目。 也就是说*.java文件中的字符是用GBK字符集保存的。 在main中，建一个中文字符串，那么这个静态串就是…
阅读更多...
java getbytes 乱码_深入解析java String中getBytes()的编码问题

java getbytes 乱码_深入解析java String中getBytes()的编码问题

Java服务器后台在和Android端App通信时&#xff0c;遇到了两端关于用MD5加密同一包含中文的字符串结果不一致的问题。 具体问题描述&#xff1a; Java服务器后台和Android端AS用了同一个MD5的工具类&#xff0c;且两边项目的默认编码都是UTF-8 &#xff0c;加密纯英文数字的字符…
阅读更多...
java getbytes 长度_JAVA中的getBytes()方法

java getbytes 长度_JAVA中的getBytes()方法

在Java中，String的getBytes()方法是得到一个操作系统默认的编码格式的字节数组。这个表示在不同情况下，返回的东西不一样！ String.getBytes(String decode)方法会根据指定的decode编码返回某字符串在该编码下的byte数组表示，如： Java代码 byte[] b_gbk = "深"…
阅读更多...
getBytes方法

getBytes方法

字符串中的字符变成一位一位的01比特流 一个英文字符占8比特&#xff0c;也就是一个字节 一个中文字符占24比特&#xff0c;也就是3个字节&#xff08;其实不同编码方式&#xff0c;占几个字节不一样&#xff0c;我们这里采取的UTF-8编码方式&#xff0c;具体可以看下图&…
阅读更多...
最全微信小程序源码项目开发代码合集

最全微信小程序源码项目开发代码合集

小程序源码是用PHP和Java编程语言编写的程序&#xff0c;可以包含在HTML页面中&#xff0c;就像图像包含在页面中一样。您在本教程中构建的应用程序向您展示了如何在IDE中构建和部署微信小程序源码。 　　 　　源码&#xff1a;y.wxlbyx.icu 　　 　　创建或导入Applet源文件 　…
阅读更多...
智慧外链微信小程序源码1.8版本

智慧外链微信小程序源码1.8版本

好不容易搞到的一套最新版的&#xff0c;又废了老大劲搭建了起来&#xff0c;想用于抖音跳转微信加好友使用&#xff0c;不知道是不是哪里没操作对&#xff0c;没达到想要的效果 现在分享出来给大家&#xff0c;人多力量大&#xff0c;跑起来的可以分享一下经验 前端、后端模块…
阅读更多...
最新抓取微信小程序源码教程+附逆向工具WxappUnpacker

最新抓取微信小程序源码教程+附逆向工具WxappUnpacker

正文: 文章目录 前言一、工具准备&#xff08;免费&#xff09; 1 解密工具2 逆向工具二、解密小程序 1.确认小程序包位置2.打开一个小程序3.解密小程序包三、逆向小程序 1、检查nodejs2、安装依赖3、正式逆向 前言 想成为一名微信小程序的开发者&#xff0c;前端思路的学习…
阅读更多...
云开发多功能工具箱微信小程序源码/带流量主微信小程序源码

云开发多功能工具箱微信小程序源码/带流量主微信小程序源码

☑️ 编号&#xff1a;ym398 ☑️ 品牌&#xff1a;无 ☑️ 语言&#xff1a;微信小程序 ☑️ 大小&#xff1a;2MB ☑️ 类型&#xff1a;云开发多功能工具箱 ☑️ 支持&#xff1a;微信小程序 &#x1f389; 欢迎关注(发消息才不限制)&#xff0c;私信&#xff0c;领取 &…
阅读更多...
推荐文章

Copyright @ 2022~2023