首页 博客列表 精选博客 智能问答 chat-GPT 关于我
JavaScript（三十七）——移动端、多媒体、CSS动画
发布日期：2021-06-30 16:35:36 浏览次数：3 分类：技术文章

本文共 6479 字，大约阅读时间需要 21 分钟。

目录

移动端基础

大纲：视图、rem布局、媒体查询

手机浏览器的内核是什么？

产业概况:全球仅有四大浏览器内核

      目前全球仅有四个独立的浏览器内核，分别为微软1E的Trident、网景最初研发后卖给Mozilla基金会并演化成火狐的Gecko., KDE的开源内核Webkit以及Opera(欧朋)的Presto。 其中，Presto是历史最悠久的内核。

      具前微软的Trident在移动终端上主婴为WP7系统内置浏览器，Opera的Presto内 核在所有联网设备上都使用，移动终端上主要为Opera Mobile、OperaMini、 欧朋浏览器以及欧朋HD Beta版，Webkit内核的适用范围则较为广泛，Android原生浏览器、苹果的Safari、 谷歌的

      Chrome(Android4.0使用)都是基于Webkit开源内核开发的。

四大浏览器内核优缺点

  •  1.Trident:因为在早期IE占有大量的市场份额，所以以前有很多网页是根据这个Trident的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好，同时存在许多安全Bug。
  • 2.Gecko:优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，缺点是消耗很多的资源，比如内存。
  • 3.Webkit:优点就是Webkit拥有清晰的源码结构、极快的渲染速度，缺点是对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。
  • 4.Presto: Presto内 核被称为公认的浏览网页速度最快的内核，同时也是处理JS脚本最兼容的内核，能在Windows、Mac及Linux操作系统下完美运行。

国内现在大多数都是基于Webkit开发的

 

视口viewport

 

移动端屏幕比pc端屏幕小很多，因此- - 个针对桌面设计的界面不一一定(或完全不)能很好的使用到移动端。所以，响应式来了!

在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。

而移动端则较为复杂，它涉及到三个视口：布局视口（Layout Viewport）、视觉视口（Visual Viewport）和理想视口（Ideal Viewport）。

两种像素

像素是计算机屏幕中显示特定颜色的最小区域。屏幕中的像素越多，同一范围内能看到的内容就越多。或者说，当设备尺寸相同时，像素越密集，画面就越精细。

那么，当我们在 CSS 中为一个元素设置属性 width: 250px; 时，会发生什么？这个元素的宽度究竟是多少像素呢？

事实上，这里已经涉及了两种不同的像素：物理像素和 CSS 像素。

物理像素（设备像素，device pixels）

指的是设备屏幕的物理像素，任何设备的物理像素数量都是固定的。

CSS 像素（CSS pixels）

是 CSS 和 JS 中使用的一个抽象概念。它和物理像素之间的比例取决于屏幕的特性（是否为高密度）以及用户进行的缩放，由浏览器自行换算。

在 Apple 的视网膜屏（Retina）中，每 4 个像素为一组，渲染出普通屏幕中一个像素显示区域内的图像，从而实现更为精细的显示效果。此时， 250px 的元素跨越了 500 个物理像素的宽度。

三种视口

移动端浏览器通常宽度是 240px~640px，而大多数为 PC 端设计的网站宽度至少为 800px，如果仍以浏览器窗口作为视口的话，网站内容在手机上看起来会非常窄。

因此，引入了布局视口、视觉视口和理想视口三个概念，使得移动端中的视口与浏览器宽度不再相关联。

  • 布局视口（layout viewport）

一般移动设备的浏览器都默认设置了一个 viewport 元标签，定义一个虚拟的布局视口（layout viewport），用于解决早期的页面在手机上显示的问题。iOS, Android 基本都将这个视口分辨率设置为 980px，所以 PC 上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

布局视口的宽度/高度可以通过 document.documentElement.clientWidth / Height 获取。

可以看到，默认的布局视口宽度为 980px。如果要显式设置布局视口，可以使用 HTML 中的 meta 标签：

布局视口使视口与移动端浏览器屏幕宽度完全独立开。CSS 布局将会根据它来进行计算，并被它约束。

  • 视觉视口（visual viewport）

视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口。

视觉视口和缩放比例的关系为：

当前缩放值 = 理想视口宽度  / 视觉视口宽度

所以，当用户放大时，视觉视口将会变小，CSS 像素将跨越更多的物理像素。

  • 理想视口（ideal viewport）

布局视口的默认宽度并不是一个理想的宽度，于是 Apple 和其他浏览器厂商引入了理想视口的概念，它对设备而言是最理想的布局视口尺寸。显示在理想视口中的网站具有最理想的宽度，用户无需进行缩放。

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

例子：

			
   				
   				
   			
   
		
    
     1
    
		
    
     2
    
		
    
     3
    
		
    
     1
    
		
    
     2
    
		
    
     3
    
	
   
*{	padding: 0;	margin: 0;}#box{		margin: 0 auto;	background-color: gray;	display: flex;	flex-direction: column;	justify-content: center;	align-items: center;}#box div{	width: 200px;	height: 60px;	line-height: 60px;	text-align: center;		}

运行结果：

 

例子：

HTML：

			
   				
   				
   			
   
    		
        
  • 			
         
    			
         
    		
    • 		
        
  • 			
         
    			
         
    		
    • 		
        
  • 			
         
    			
         
    		
    • 		
        
  • 			
         
    			
         
    		
    •

CSS：

*{	padding: 0;	margin: 0;}#list{	width: 100%;	height: 80px;	}#list>li{	display: flex;	width: 100%;	height: 80px;	margin-bottom: 1px;}#list>li>div:nth-child(1){	background-color: greenyellow;	width: 25%;	height: 100%;}#list>li>div:nth-child(2){	background-color: royalblue;	width: 75%;	height: 100%;}#tab{	width: 100%;	height: 50px;	position: fixed;	bottom: 0px;}#tab>ul{	display: flex;	height: 100%;	/*justify-content: space-around;*/}#tab>ul>li{	list-style: none;	width: 25%;	height: 100%;	background-color: gray;	text-align: center;	line-height: 50px;}#tab>ul>li>a{	text-decoration: none;	font-size: 20px;}

运行结果：

 

rem

rem说明：相对长度单位，相对于根元素(即html元素)计算值的倍数。

简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。

em是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。

rem和px之间的换算：1rem === 16px

 

多媒体

Html4时代，刚页没有显示视频的一个标准，所以基本都要借助插件来实现视频的播放，插件过多或者插件自身问题，很容易引起浏览器的假死，造成用户体验不佳。

      <embed src=“url">

      为了创建更加丰富的web页面和web富应用，W3C在 htmI5中加入了多媒体video (视频)和audio (音频)标签和相关API，目标就是干掉fash这样的插件。

使用embed标签可以在网页中可放置MP3音乐、电影、flash动画等多媒体内容。

基本语法：

<embed  src=“文件路径” width=value  height=value hidden=hidden_value  autostart=auto_value  loop=loop_value> </embed>

语法解释： 

  • hidden设置播放面板的显示和隐藏，hidden_value有两个值：true(隐藏)和no(显示)； 
  • autostart设置多媒体内容的播放方式， auto_value 有两个值：true（自动播放）和no（不自动播放）；
  • loop设定是否循环播放， loop_value有两个值：true（无限次循环播放）no（仅播放一次）。

 

视频格式

MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。

格式 文件 描述
AVI .avi AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式，但非 Windows 计算机并不总是能够播放。
WMV .wmv Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见，但是如果未安装额外的（免费）组件，就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放，因为没有合适的播放器。
MPEG
  • .mpg
  • .mpeg
 MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的，得到了所有最流行的浏览器的支持。
QuickTime .mov QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式，但是 QuickTime 电影不能在没有安装额外的（免费）组件的 Windows 计算机上播放。
RealVideo
  • .rm
  • .ram
 RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是低带宽优先的，质量常会降低。
Flash
  • .swf
  • .flv
 Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。
Mpeg-4 .mp4 Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上，YouTube 推荐使用 MP4。YouTube 接收多种格式，然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4，将其作为 Flash 播放器和 HTML5 的因特网共享格式。

 

声音格式

格式 文件 描述
MIDI
  • .mid
  • .midi

MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。

。

因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小，但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。
RealAudio
  • .rm
  • .ram
 RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低。
Wave .wav Wave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器（除了 Google Chrome）都支持它。
WMA .wma WMA 格式 (Windows Media Audio)，质量优于 MP3，兼容大多数播放器，除了 iPod。WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用。
MP3
  • .mp3
  • .mpga
 MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。

 

例子：

注意：绝对路径：使用图片在硬盘上的绝对位置来访问图片，通常是从根目录开始，向下一个目录一个目录的寻找；在开发网页的过程中，一般不会使用绝对路径

运行结果：

 

CSS动画

如何制作CSS动画：

  1. 转换transform
  2. 动画@keyframes规则，animation属性
  3. 过度transition
  4. RequestAnimationFrame
  5. setInterval
  6. 动画算子
  7. 动画库如jQuery封装，Velocity.js

CSS的transform属性：

例子：

			
   							
   
    afdgsdgsfgdf
   
		
   
    按公司大股东
   
		
   
    图图有条件

运行结果：

 

例子：点击旋转图片

			
   							
   
    afdgsdgsfgdf

 运行结果：

 

CSS中的动画功能

 

CSS3中的动画分为Animations功能与Transitions功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果

1、Animations功能支持通过关键帧的指定来再页面上产生更复杂的动画效果
2、Transitions功能支持从一 个属性值平滑过渡到另一个属性值

例子：鼠标移动颜色渐变

 运行结果：

 

例子：

 

例子：类似时钟指针转动

 运行结果：

 

 

 

一起学习，一起进步 -.- ，如有错误，可以发评论 

转载地址：https://kongchengji.blog.csdn.net/article/details/98868991 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：JavaScript（三十八）——动画练习，触屏事件
下一篇：域名和服务器的购买和配置

发表评论

最新留言

初次前来，多多关照！
[***.217.46.12]2024年04月17日 01时02分17秒

关于作者

    喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！

推荐文章

Android使用Retrofit_01_OAuth2 + GitHub 2019-04-30
Django oauth toolkit + Android + Retrofit 实现 OAuth2 的 access token 获取 2019-04-30
Android + Django + OAuth2 + Stub Authenticator 2019-04-30
Django + REST学习笔记 2019-04-30
Android Sync Adapter (使用Stub Content Provider) 笔记 2019-04-30
诡异的 Scroll view may have only one direct child placed within it 错误 2019-04-30
【转载】将Ubuntu16.04 中gedit在仅显示一个文件时显示文件名tab 2019-04-30
fstream 对象多次使用时注意clear 2019-04-30
调试 LenaCV 3D Camera (Linux) 2019-04-30
OpenCV杂记 - Mat in C++ 2019-04-30
lnmp部署 2019-04-30
nginx平滑升级 2019-04-30
location区段 2019-04-30
nginx访问控制、基于用户认证、https配置 2019-04-30
用zabbix监控nginx 2019-04-30
rewrite和if语句 2019-04-30
nginx实现负载均衡和动静分离 2019-04-30
SaltStack 2019-04-30
Packer 如何将 JSON 的配置升级为 HCL2 2019-04-30
AWS SDK 发送请求的时候提示 InvalidSignatureException: Signature expired 错误 2019-04-30
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 310673550 位访客
访问时间: 2024-05-04 14:57:29 访问IP: 18.220.1.239     Copyright © 2020 - 2023 blog.css8.cn 京ICP备2021015314号-1 手机版