超详细的rem+vw移动端屏幕适配方案

在说具体内容之前,我们必须了解几个概念,就是:Retina屏、物理像素、设备独立像素、设备像素比

在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个抽象的单位,在不同的设备或不同的环境中,CSS中的1px所代表的物理像素是不同的。在PC端,CSS的1px一般对应着电脑屏幕的1个物理像素,但在移动端,CSS的1px等于几个物理像素是和屏幕像素密度有关的。

1.Retina屏

所谓“Retina”是一种显示标准,是把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。最初该技术是用于Moto Aura上。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。

Retina屏一般在苹果公司的产品上用的比较多,诸如MacBook、iPad、iPhone等

以MacBook Pro with Retina Display为例,工作时显卡渲染出2880x1800个像素,其中每四个像素一组,输出原来屏幕的一个像素显示的大小区域内的图像。这样一来,用户所看到的图标与文字的大小与原来的1440x900分辨率显示屏相同,但精细度是原来的4倍,但对于特殊元素,如视频与图像,则以一个图片像素对应一个屏幕像素的方式显示。故不会产生Windows中分辨率提升使屏幕文字与图像变小,造成阅读困难的问题。这样在设计软件时只需将所有的UI元素的精细度都提高到原来的4倍就可以既保持了观看舒适度,又提高了显示效果。关于iOS设备,也由四个像素代替原来一个像素,通过下图对比就可以较明显地观察到这种关系

2.物理像素(physical pixel)

物理像素又被称为设备像素、设备物理像素,它是显示器(电脑、手机屏幕)最小的物理显示单位,每个物理像素由颜色值和亮度值组成。所谓的一倍屏、二倍屏(Retina)、三倍屏,指的是设备以多少物理像素来显示一个CSS像素,也就是说,多倍屏以更多更精细的物理像素点来显示一个CSS像素点,在普通屏幕下1个CSS像素对应1个物理像素,而在二倍Retina屏幕下,1个CSS像素对应的却是4个物理像素(参照上面Retina屏的原理下文田字示意图理解)。

3.设备独立像素(device-independent pixel)

设备独立像素是我们写CSS时所用的像素,它是一个抽像的单位,主要使用在浏览器上,用来精确度量Web页面上的内容。

4.设备像素比(device pixel ratio)

设备像素比简称为dpr物理像素与设备独立像素的比例

移动端Web页面适配方案(整理版)

@(概述)[基本概念|百分比|rem|vw/vh|响应式设计]

移动端web页面的开发,由于手机屏幕尺寸分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需要在开发过程中使用合理的适配方案来解决这个问题。

早期网页设计采用静态布局,通过<meta>标签中的applicable-device应用设备标识识别移动设备,即<meta name = 'applicable-device' content = 'mobile'>,在<meta>标签中的viewport标签中设置width,通过js动态修改标签的initial-scale使得页面等比缩放,刚好占满整个屏幕。一些文章中有提到静态布局中页面各个元素采用px为单位,这种方案实现简单,不存在兼容性问题,但用户体验很不友好。

后面出现流式布局,使用百分比%定义宽度,高度使用

Ubuntu环境搭建Coturn(stun和turn服务器)

一、gitHub下载coturn源码

https://github.com/coturn/coturn.git

二、进入到源码目录,编译源码

./configure --prefix=/usr/local/coturn

2-1:编译异常

image.png

2-2:下载相关库文件:libevent和libssl

sudo apt-get install libssl-dev libevent-dev

2-3:编译通过

image.png

2-4:安装

make -j 4 
sudo make install

2-5:进入安装路径,查看相关文件

cd /usr/local/coturn

image.png

2-6:配置环境变量

vim ~/.bashrc
2-6-1:插入以下内容
export coturn_home=/usr/local/coturn
export PATH=$PATH:$coturn_home/bin
2-6-2:使配置的环境变量生效,执行以下命令
source ~/.bashrc

三、配置turnserver.conf

3.1修改配置文件

进入安装目录**(/usr/local/coturn)**下的etc文件件,里面会默认一个turnserver.conf.default,直接拷贝一份,命名为turnserver.conf,然后打开turnserver.conf,找到下面的内容,修改为自己的真实数据即可

    

WebRTC 终极指南

webrtc-图标  什么是 WebRTC?

Web 实时通信 (WebRTC) 既是一个开源项目,也是一个规范,它支持实时媒体通信,如语音、视频和数据在浏览器和设备之间的本地传输。这使用户无需复杂的插件或额外的硬件就可以在他们的主要 Web 浏览器中进行通信。

WebRTC 项目于 2011 年 5 月由 Google 首次宣布,作为开发一套通用协议的一种手段,用于在浏览器、移动平台和物联网设备中启用高质量的 RTC 应用程序。当时,Flash 和插件是提供实时通信的唯一方法。两年后,经过大量工作,Chrome 和 Firefox 之间建立了第一个跨浏览器视频通话。随着越来越多的组织增加对规范的支持,开发者社区对 WebRTC 的支持也随之飙升。今天,WebRTC 在 Chrome、Firefox、Safari、Edge、Android 和 iOS 中本地(不同程度地)可用,并且是一种广受欢迎的视频通话工具。…

    

http、https、RTSP、RTMP等常见默认端口大全

端口 说明
0 无效端口,通常用于分析操作系统
1 传输控制协议端口服务多路开关选择器
2 管理实用程序
3 压缩进程
5 远程作业登录
7 回显
9 丢弃
11 在线用户
13 时间
17 每日引用
18 消息发送协议
19 字符发生器
20 FTP文件传输协议(默认数据口)
21 FTP文件传输协议(控制)
22 SSH远程登录协议
23 telnet(终端仿真协议),木马Tiny Telnet Server开放此端口
24 预留给个人用邮件系统
25 SMTP服务器所开放的端口,用于发送邮件