移动web手册电子版

① 《HTML5移动Web开发指南》和《HTML5移动应用开发入门经典》哪个更好

• 建议可以从入门的程度选择，如果是一点都没有接触过，建议选择《HTML5移动Web开发指南》；如果是了解过原理以及一些常识《HTML5移动应用开发入门经典》更加偏向于实战案例讲解入门：

• 选择哪一本书，主要是根据读者现在自身的情况和讲解的内容来进行判断，两本书的内容简介如下：

一、《HTML5移动Web开发指南》本书主要围绕HTML5技术，讲述如何利用HTML5相关技术开发移动Web网站和Web App应用程序。本书共分为四大部分：

1、第一部分主要讲述Web技术的发展及HTML5标准在移动Web技术中的应用；

2、第二部分主要介绍HTML5的新功能和新特性如何在移动设备浏览器中使用及相关展望；

3、第三部分主要介绍比较流行的两套JavaScript移动开发框架jQuery Mobile、Sencha ；Touch，以及PhoneGap，并配备丰富的例子作为实践；

4、第四部分主要结合Sencha Touch框架库和HTML5技术构建进行讲解，旨在帮助读者将HTML5技术运用于实践之中。

二、《HTML5移动应用开发入门经典》总共分为24章，以示例的方式对如何使用HTML5及相关技术进行移动应用开发做了全面而细致的介绍。

1、《HTML5移动应用开发入门经典》首先讲解了HTML5的起源以及它为什么适用于移动设备，然后讲解了HTML5的基本元素以及所做的改进、canvas（画布）、视音频、微格式、微数据、拖曳等新增特性；

2、还讲解了WebSocket、WebWorkers、Web存储、离线Web应用程序、地理定位等新增的API。同时，《HTML5移动应用开发入门经典》还针对不同平台（如iOS、BlackBerry、Android）的移动设备、不同的浏览器，就如何开发高可用性的移动应用程序进行了讲解。

② 求《移动web前端高效开发实战》全文免费下载百度网盘资源,谢谢~

《移动web前端高效开发实战》网络网盘pdf最新全集下载:
链接：https://pan..com/s/1wpm-rUDxWfU4HsdRmGfNOQ

?pwd=v1eb 提取码：v1eb
简介：移动互联网的兴起和快速普及，给前端开发人员带来了新机遇。移动Web前端技术作为整个技术链条中重要的一环，却乱象丛生。本书是一本梳理移动前端和Native客户端技术体系的入门实战书。

本书涵盖了移动Web前端开发中的各个关键技术环节，共14章。分别从HTML 5、CSS 3、JavaScript的ECMAScript 5和ECMAScript 6版本、移动端常用布局方案、MV*类新时代框架、预编译技术、性能优化、开发调试、混合式应用、单元测试、工程化等方面全面地还原一线互联网公司Web前端技术栈。

创作本书的初衷是帮助移动Web前端开发领域的工程师们，勾画出一张实用并且具体的技术图，帮助读者正确且快速地掌握学习路径。本书篇幅有限，力求精简，只列举了各技术栈中核心关键部分，包括大量基于Web前端的优秀开源技术类库和框架介绍，是进入移动Web开发领域的实用指南。

③ 如何做一个移动web页面，用Jquery Mobile 吗

方法/步骤1简单的说明一下JQueryMobile.它是一个很好的跨平台的移动端网站开发框架。是一个前台的框架。现在要使用这个框架组一个界面，这个界面很简单，但是麻雀虽小五脏俱全，然后模板实现，知识讲解完毕。html要使用HTML5的标准来写，因为JQueryMobile是基于HTML5的。书写html5的格式如图，2既然使用JQueryMobile就要有这个框架，这里可以使用本地引用的方式，和网上引用，也叫做cdn引用。就是比较稳定和快速的引用外部文件的一种方式。这里使用cdn的方式，这样只要可以上网就可以使用该框架。3在写移动端的网站的时候，一定要写一个meta的name为viewport的属性，因为该属性代表着网站页面的自适应。简单的写法为：代表着网站为驱动设备的宽度。4然后加入框架之后，写一个简单的界面。这里面JQueryMobile大量的使用了一个data-的属性，这里使用最多的事data-role。代表着他默认的样式规则。就是提前定义好了很多的样式来供你使用。常用的page.代表着页面，listview，代表着一个列表视图。下面是代码和效果图5稍微说明一下。data-role="page"是代表着一个页面可以看做该内容下是一个页面显示的内容data-role=”header"代表着页面的页头，就是页面的最上面显示的内容这里需要注意，里面要加上子标签内容，要不然，就不会居中显示内容了。推荐使用h1.data-role="footer"代表着页脚的内容。也是网站的一个说明信息。或者是一个底部导航菜单。还有一部分，就是data-role="content"是代表着页面内容部分，主要的内容在这里面显示。这3个部分构成了一个简单的页面。所以，现在可以体验到它的强大，不用写太多的代码一个简单的框架就好了，下面继续增加一个listveiw的列表视图。6完成列表视图的代码，增加一个文章列举表的代码，这里列表是使用data-role="listview"来修饰样式。然后这里只需要加上data-role="listview"你发现想要的list效果就实现了。这样我们一个简单的页面效果就实现了。一个简单开发例子

④ GitHub 上有哪些值得推荐的开源电子书

语言无关类
操作系统

• 鸟哥的Linux私房菜 (简体)

• Linux 系统高级编程

• The Linux Command Line (中英文版)

• Linux 设备驱动 (第三版)

• 深入分析Linux内核源码

• UNIX TOOLBOX

• Docker中文指南

• Docker —— 从入门到实践

• FreeRADIUS新手入门

• Mac 开发配置手册

• FreeBSD 使用手册

• Linux 命令行(中文版)

• 智能系统

• 一步步搭建物联网系统

• web服务器

• Nginx开发从入门到精通 (淘宝团队出品)

• 版本控制

• Git教程 （本文由 @廖雪峰 创作，如果觉得本教程对您有帮助，可以去 iTunes 购买）

• git – 简易指南

• 猴子都能懂的GIT入门

• Git 参考手册

• Pro Git

• Git Magic

• GotGitHub

• Git Community Book 中文版

• Mercurial 使用教程

• HgInit (中文版)

• 沉浸式学 Git

• Git-Cheat-Sheet （感谢 @flyhigher139 翻译了中文版）

• GitHub秘籍

• NoSQL

• NoSQL数据库笔谈 (PDF)

• Redis 设计与实现

• Redis 命令参考

• 带有详细注释的 Redis 3.0 代码

• 带有详细注释的 Redis 2.6 代码

• The Little MongoDB Book

• The Little Redis Book

• Neo4j 简体中文手册 v1.8

• Neo4j .rb 中文资源

• MySQL

• MySQL索引背后的数据结构及算法原理

• 项目相关

• 持续集成（第二版） (译言网)

• 让开发自动化系列专栏

• 追求代码质量

• selenium 中文文档

• Joel谈软件

• 约耳谈软体(Joel on Software)

• Web

• 关于浏览器和网络的 20 项须知

• 前端知识体系

• 浏览器开发工具的秘密

• Chrome 开发者工具中文手册

• Chrome扩展开发文档

• Grunt中文文档

• 移动Web前端知识库

• 正则表达式30分钟入门教程

• 前端开发体系建设日记

• 移动前端开发收藏夹

• JSON风格指南

• HTTP 接口设计指北

• 前端资源分享（一）

• 前端资源分享（二）

• 前端代码规范 及 最佳实践

• w3school教程整理

• 大数据

• 大数据/数据挖掘/推荐系统/机器学习相关资源

• 编程艺术

• 程序员编程艺术

• 每个程序员都应该了解的内存知识(译)【第一部分】

• 取悦的工序：如何理解游戏 (豆瓣阅读，免费书籍)

• 其他

• OpenWrt智能、自动、透明翻墙路由器教程

• 语言相关类 AWK

• awk程序设计语言

• C/C++

• C++ 并发编程指南 (@傅海平ICT)

• Linux C编程一站式学陪袭枯习 (宋劲杉, 北京亚嵌教育研究中心)

• CGDB中文手册

• 100个gdb小技巧

• 100个gcc小技巧禅碰

• ZMQ 指南

• How to Think Like a Computer Scientist (中英文版)

• 跟我一起写Makefile(PDF)

• GNU make中文手册

• GNU make 指南

• Google C++ 风格指南

• C/C++ Primer (by @andycai)

• 简单易懂的C魔法

• Cmake 实践 (PDF版)

• C++ FAQ LITE(中文版)

• C++ Primer 5th Answers

• CSS/HTML

• 学习CSS布局

• 通用 CSS 笔记、建议与指导

• CSS参考手册

• Emmet 文档

• 前端代码规范 (腾讯alloyteam团队)

• Dart

• Dart 语言导览

• Fortran

• Fortran77和90/95编程入门

• Java

• 实时 Java 系列

• Apache Shiro 用户指南

• 使用 Eclipse 和 Java SE 6 创建独立 Web Services 应用程序

• 第 1 部分: Web Services 服务端应用程序

• 第 2 部分: Web 服务客户端应用程序

• JavaServer Faces 1.2 入门

• 第 1 部分: 构建基本应用程序

• 第 2 部分: JSF 生命周期、转换、检验和阶段监听器

• 用 Eclipse Europa 进行 Web 开发

• 第 1 部分: Eclipse Java EE

• 第 2 部分: PHP 开发工具

• 第 3 部分: Ruby Development Toolkit 和 RadRails

• 使用 JavaServer Faces 构建芦洞 Apache Geronimo 应用程序

• 第 1 部分: 使用 Eclipse 和 Apache MyFaces Core 构建基本的应用程序

• 第 2 部分: 在 JavaServer Faces 中使用 Tomahawk

• 第 3 部分: 使用 ajax4jsf 添加 Ajax 功能

• 第 4 部分: 使用 Apache Trinidad 组件扩展 JSF

• 第 5 部分: 将 JSF 应用程序与 Spring 集成

• Apache Geronimo 和 Spring 框架

• 第 1 部分: 开发方法学

• 第 2 部分: 构建第一个应用程序

• 第 3 部分: 集成 DAO 与 ORM

• 第 4 部分: 混合使用 Spring AOP 和 Spring Web Flow

• 第 5 部分: Spring MVC

• 第 6 部分: Spring MVC：使用 Web 视图技术

• 终极 mashup —— Web 服务和语义 Web

• 第 1 部分: 使用与组合 Web 服务

• 第 2 部分: 管理 Mashup 数据缓存

• 第 3 部分: 理解 RDF 和 RDFs

• 第 4 部分: 创建本体

• 第 5 部分: 切换 Web 服务

• Jersey 2.x 用户指南

• MyBatis中文文档

• JavaScript

• Google JavaScript 代码风格指南

• Airbnb JavaScript 规范

• JavaScript 标准参考教程（alpha）

• Javascript编程指南 (源码)

• javascript 的 12 个怪癖

• JavaScript 秘密花园

• JavaScript核心概念及实践 (PDF) (此书已由人民邮电出版社出版发行，但作者依然免费提供PDF版本，希望开发者们去购买，支持作者)

• 《JavaScript 模式》翻译，此书中文版有售，但是纸质书翻译的还没有这个版本翻译的好

• 命名函数表达式探秘 (注:原文由为之漫笔翻译，原始地址无法打开，所以此处地址为我博客上的备份)

• 学用 JavaScript 设计模式 (开源中国)

• 深入理解JavaScript系列

• ECMAScript 6 入门 (作者：阮一峰)

• jQuery

• jQuery 解构

• 简单易懂的JQuery魔法

• How to write jQuery plugin

• Node.js

• Node入门

• 七天学会NodeJS

• Nodejs Wiki Book (繁体中文)

• express.js 中文文档

• koa 中文文档

• 使用 Express + MongoDB 搭建多人博客

• Express框架

• nodejs文档

• Node.js 包教不包会

• Learn You The Node.js For Much Win! (中文版)

• Node debug 三法三例

• underscore.js

• Underscore.js中文文档

• backbone.js

• backbone.js入门教程 (PDF)

• Backbone.js入门教程第二版

• Developing Backbone.js Applications(中文版)

• AngularJS

• AngularJS最佳实践和风格指南

• AngularJS中译本

• AngularJS入门教程

• 构建自己的AngularJS

• 在Windows环境下用Yeoman构建AngularJS项目

• zepto 简明中文手册

• Sea.js

• Hello Sea.js

• CoffeeScript

• CoffeeScript Cookbook

• The Little Book on CoffeeScript中文版

• ExtJS

• Ext4.1.0 中文文档

• Chrome扩展及应用开发

• JavaScript入门教程

• PHP

• PHP调试技术手册(PDF)

• XDebug 2中文手册(译) (CHM)

• PHP之道

• PHP 最佳实践

• PHP安全最佳实践

• 深入理解PHP内核

• PHP扩展开发及内核应用

• CodeIgniter 用户指南

• Laravel4 中文文档

• Laravel 入门

• Symfony2中文文档 (未译完)

• Phalcon中文文档（翻译进行中）

• YiiBook几本Yii框架的在线教程

• 简单易懂的PHP魔法

• swoole文档及入门教程

• iOS

• iOS开发60分钟入门

• iOS7人机界面指南

• Google Objective-C Style Guide 中文版

• iPhone 6 屏幕揭秘

• Apple Watch开发初探

• 马上着手开发 iOS 应用程序

• 网易斯坦福大学公开课：iOS 7应用开发字幕文件

• Android

• Android Design(中文版)

• Google Android官方培训课程中文版

• Android学习之路

• Python

• 小白的Python教程

• 简明Python教程

• 零基础学Python

• Python 2.7 官方教程中文版

• Python 3.3 官方教程中文版

• 深入 Python 3

• PEP8 Python代码风格规范

• Google Python 风格指南 中文版

• Python入门教程 (PDF)

• Python的神奇方法指南

• 笨办法学 Python （PDF版下载）

• Django 文档中文版

• Django 最佳实践

• The Django Book 中文版

• web.py 0.3 新手指南

• Web.py Cookbook 简体中文版

• Dive Into Python 中文版

• Bottle 文档中文版 (需翻墙)

• Flask 文档中文版

• Jinja2 文档中文版

• Werkzeug 文档中文版

• Flask之旅

• Introction to Tornado 中文翻译

• Python自然语言处理中文版 （感谢陈涛同学的翻译，也谢谢 @shwley 联系了作者）

• Python 绘图库 matplotlib 官方指南中文翻译

• Scrapy 0.25 文档

• ThinkPython

• Ruby

• Ruby 风格指南

• Rails 风格指南

• 笨方法学 Ruby

• Ruby on Rails 指南

• Ruby on Rails 实战圣经

• Ruby on Rails Tutorial 原书第 2 版 (本书网页版免费提供，电子版以 PDF、EPub 和 Mobi 格式提供购买，仅售 9.9 美元)

• 编写Ruby的C拓展

• Ruby 源码解读

• Shell

• Shell脚本编程30分钟入门

• Go

• Go编程基础

• Go入门指南

• 学习Go语言 (PDF)

• Go Web 编程 (此书已经出版，希望开发者们去购买，支持作者的创作)

• Go实战开发 (当我收录此项目时，作者已经写完第三章，如果读完前面章节觉得有帮助，可以给作者捐赠，以鼓励作者的继续创作)

• Network programming with Go 中文翻译版本

• Groovy

• 实战 Groovy 系列

• LaTeX

• 一份其实很短的 LaTeX 入门文档

• 一份不太简短的 LATEX 2ε 介绍 （PDF版）

• LISP

• ANSI Common Lisp 中文翻译版

• Lua

• Lua编程入门

• Haskell

• Real World Haskell 中文版

• R

• R语言忍者秘笈

• Scala

• Scala课堂 (Twitter的Scala中文教程)

• Effective Scala(Twitter的Scala最佳实践的中文翻译)

• Scala指南

• Swift

• The Swift Programming Language 中文版

• Perl

• Modern Perl 中文版

• Perl 程序员应该知道的事

• Prolog

• 笨办法学Prolog

• Vim中文文档

• Vimscript

• 笨方法学Vimscript 中译本

• Vim中文文档

• 读书笔记及其它 读书笔记

• 编译原理（紫龙书）中文第2版习题答案

• 把《编程珠玑》读薄

• Effective C++读书笔记

• Golang 学习笔记、Python 学习笔记、C 学习笔记 (PDF)

• Jsoup 学习笔记

• 学习笔记: Vim、Python、memcached

• 图灵开放书翻译计划–C++、Python、Java等

• 蒂姆·奥莱利随笔 （由译言网翻译，电子版免费）

• Octave 入门 （PDF版）

• SICP 解题集

• 精彩博客集合

• 正则表达式简明参考

⑤ 浅淡HTML5移动Web开发(二)

3、HTML5新增标签

在html5中新增量很多标签，加强连html标签的语义化，如等等，这些标签都各自有自己大意义，不再仅仅是span和div，虽然html4中也有很多语义化的标签，但是不如html5丰富。除了这些新增的标签，还有一些此前就有的标签，但是类别新增，最具代表性的就是表单form，而本文要介绍的就是form。

以上除了type=text外，其他的都是新增的，如果浏览器支持这些属性的话，就会自动调用相应组件，如在移动设备中type=number/email/text时，浏览器会调用不同版面的键盘，这样加快用户的输入，体验也更美好，如下

如果是type=range则会出现这样的组件，供选择范围，如果是type=color则会出现颜色选择器，如果是type=date则出现日期选择器，如果是type=search,则在输入时候出现一个一键清除的按钮，点击输入的文字全部清除

另外，除了input的type新增量类别，还增加一些很实用的属性，如placeholder，我们知道，input中我们常常会默认一些文案，当用户输入的时候会自动清除，html5之前我们是靠javascript实现的，但是有了html5，我们可以轻松实现，只需要placeholder=”默认文案”。

4、选择符

选择符大致分为元素选择符、关系选择符、属性选择符、伪类选择符、伪对象选择符，在PC端，我们用的最多的就是元素选择符、关系选择符和属性选择符如

div{……}、div.class{……}、div#id{……}、div span{……}、div[class=”classname”]{}

伪类选择符和伪对象选择符有很多，灵活运用可以减少很多不必要的代码。如E:nth-child(n){ …… }、E:nth-of-type(n){ …… }、E:disabled{ …… }、E:empty{ …… }、E:first-letter/E::first-letter{ …… }、E:first-line/E::first-line{ …… }、E:before/E::before{ ……}、E:after/E::after{…… }、E::selection{ …… }等，这里不细说。

以上是环球青藤小编为考生整理的HTML5移动Web开发的相关内容，希望对大家有帮助!更多HTML5相关内容尽在本平台，记得及时查看哦!

⑥ 《web前端开发最佳实践》pdf下载在线阅读全文，求百度网盘云资源

《web前端开发最佳实践》网络网盘pdf最新全集下载:
链接：https://pan..com/s/1BOKYfpMnD0t057gxx1NqLA

?pwd=ddxh 提取码：ddxh
简介：本书贴近Web前端标准来介绍前端开发相关最佳实践，目的在于让前端开发工程师提高编写代码的质量，重视代码的可维护性和执行性能，让初级工程师从入门开始就养成一个良好的编码习惯

⑦ H3C MSR 20-10路由器 Web配置手册

msr20-10，可以通过web的方式配置。
web配置手册可以在华三官方网站下载。
为了方便用户使用，H3C
MSR
20-1X系列路由器在无配置文件的情况下可以自动配置设备的0接口IP地址为192.168.1.1，并建立用户名：admin，密码admin的用户。用户只需要把设备上电启动后，将配置终端设置为192.168.1.0/24（非192.168.1.1）的IP地址。并把网线连接到设备的Ethernet0/0(或者GigabitEthernet0/0)接口就可以使用用户名admin登录设备进行配置

⑧ 移动端的web页面调试方法

移动端的web页面调试一般可以采取以下三种调试方法：第一，在PC端的浏览器里直接f12调试，一般现在的浏览器都有devicemode，调用这个模式浏览器就可以模拟移雹简动端的设备进行调试，目前chrome支持的设备包括苹果、三星、nexus等；

第二，在PC端创建安卓和ios的虚拟机调试，感觉有点复杂，一般web开发很少用这种模式，原生app开发用得比较多；

第三，直接用移动设备测试袭肆睁，将你开拍岁发所用的PC和要测试的移动设备连接在同一个局域网下，通过PC搭建一个服务器，这样移动设备就可以通过局域网ip访问你开发的网页看效果了。

通常来说，第一种调试方式方便快捷，能够快速的查看效果，基本上解决90%的调试问题。剩下的问题一般要配合第三种方法，比如不同的系统（安卓、苹果）搭配不同的浏览器（UC、QQ、chrome、Safari）的显示差异问题等等。

⑨ 如何编写移动Web页面

和pc区别不卜孝腊大，头部加上这句 1 然后还是别用jQuery mobile吧。太大。型滑慎孝 去看看zepto.js吧

⑩ 移动端Web页面适配方案（整理版）

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

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

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

后面出现 流式布局 ，使用百分比 % 定义宽度，高度使用 px 固定，根据可视区域大小实时进行尺寸调整，通常使用 max-width/min-width 控制尺寸范围过大或者过小。这种方案实现比较简单，但在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。

顺应不同页面字体大小展现问题，出现了 弹性布局 。这种布局方案下，包裹文字的元素的尺寸采用 em/rem 为单位，页面主要划分区域的尺寸依据情况使用 px 、百分数或者 em/rem 。如一些高校的网站 jlu ，页面的主要划分区域使用 px 和百分比，包裹文字的元素和文字采用 em 。

上面的这几种方案下，页面元素的大小按照屏幕分辨率进行适配调整，但是整体布局不变，对于 响应式web设计 ，网页布局会随着访问它的视口及设备的不同呈现不同的样式，在实现上可能会以上多种方案的结合，同时搭配 媒体查询 技术使用，使得一个页面在多个终端 (PC, mobile, pad) 呈现满意效果，如 mashable 。

[TOC]

像素，是屏幕上显示数据的最基本的点，表示相对大小。不同分辨率下相同长度的 px 元素显示会不一样，是因为像素点的个数相同情况下，不同分辨率下每个像素点对应的像素宽度不同。比如同样是 14px 大小的字，在 1366×768 显示屏下会显示的小，在 1024×768 显示屏下会相对大。也称为 物理像素（设备像素 ），是分辨率的尺寸单位。

印刷行业常用单位，能够使用测量设备测得的长度，等于 1/72 英寸。

在不同屏幕上， css 像素呈现的物理尺寸一致，但 css 像素对应的物理像素具数不同。标准的显示密度下， 1 个 css 像素对应一个物理像素，缩放时， 1 个 css 像素对应的物理像素会减增。是一种 设备独立像素(device independent pixels: DIPs)

像素密度，每英寸所拥有的像素数。值越高，显示画面细节越丰富。计算公式为： ，其中 和 是分辨率的宽高， 是屏幕尺寸。

打印设备每英寸印刷出来的点有多少个，值越高，图片越细腻。

设备物理像素和设备独立像素比 ，即 是指在理想布局宽度，使用多少个物理像素来渲染一个css像素。js中通过 window.devicePixelRatio 获取，css中通过 -webkit-device-pixel-ratio , -webkit-min-device-pixel-ratio , -webkit-max-device-pixel-ratio 进行媒体查询。

<meta> 标签中定义了一些元数据信息，通过设置 <meta name = "viewport"> ，提供有关 视口初始大小 的信息，供 移动设备 使用。属性值为

移动端涉及 布局视口 （Layout Viewport）、 视觉视口 （Visual ViewPort）和 理想视口 （Ideal ViewPort）。

与移动端web页面适配有关的手机屏幕特性包括

硬件所支持的，屏幕每行的像素 * 每列的像素点数，单位是 px 。

设备独立的，软件可以达到的，个人理解是使得软件/页面在不同屏幕上显示出来的效果一致。

像素分辨率 ÷ 逻辑分辨率等于 倍率 ，如 @3x 表示分辨率的 3 倍。一个已知物理像素大小的元素，如果在普通屏中其设备像素等于 css 像素，但在一些高清屏中，如 Retina 显示屏，一个css像素对应 2 或 3 个设备像素，这时显示出来的元素会变小。为了让元素如期待显示，需要传入 原始设计稿尺寸 × 倍率 的设计稿，根据 DPR 的定义，这样加载后能够达到同样的效果。

手机屏幕对角线长度换算成英寸的大小

贴上 源码 分析

视口 是浏览器中用于呈现网页的区域，移动端的视口通常指的是 布局视口

使用 css 预处理器把设计稿尺寸转换为 vw 单位，包括 文本 ， 布局高宽 ， 间距 等，使得这些元素能够随视口大小自适应调整。以 1080px 设计稿为基准，转化的计算表示为

响应式设计 使得一个网站同时适配 多种设备 和 多个屏幕 ，让网站的布局和功能随用户的使用环境（屏幕大小、输出方式、设备/浏览器能力而变化），使其视觉合理，交互方式符合习惯。如使得内容区块可伸缩与自由排布，边距适应页面尺寸，图片适应比例变化，能够自动隐藏/部分显示内容，能自动折叠导航和菜单。