镜头的奥秘《分镜头脚本创作》
《分镜头脚本创作》带你一起探寻镜头中的世界。...
2023-06-11
本文归纳了6个点，个人整理，无前后顺序关系，希望能够让大家从中受到一些启发。
首先，让我们了解一下我们当前的处境和状况
随着移动设备使用量呈爆炸式增长。因此用户会使用各种各样的视口（不同的尺寸和方向） 和带宽来浏览网页。在可预见的未来，我们需要以基本内容、分层特性和渐进增强为基 准来设计和制作网站。此外，考虑到带宽差异，网站代码应该尽可能保持简洁和灵活。
就以爱奇艺网站为例，在IE9浏览器中是这样的：
IE9中浏览器打开的
在Android浏览器中打开是这样的：
IPhone中打开的样式
ipd上打开效果图：
IPD上打开效果图
所谓的不同系统，所打开的细节上里上都有所不同，这就是上述所说的：网站代码应该尽可能保持简洁和灵活。
渐进增强与优雅降级
想必有些人可能听过“优雅降级”和“渐进增强”这两个词。它们是处理多浏览器支持的两种方 法论，并在 Web 社区中引发过激烈的辩论。虽然最初它们看起来是两个可互换的概念， 但本质上则完全相反。
优雅降级：指的是为现代浏览器制作网站，然后保证为某些老版本浏览器提供基本可用的 体验。新特性在老版本浏览器中会降级，且一般会有一个分界点，声明不支持那些过去版本的浏览器。有些时候用户也仅会被警告他们所使用的浏览器有问题，建议其更换（如 “您的浏览器老得让人笑话——建议下载最新版浏览器！”）
渐进增强：与优雅降级恰好相反。渐进增强以恪守 Web 标准的标签为基础，意味着它在所 有浏览器中均可用。然后通过 CSS 样式和必要的 JavaScript 来为更先进的浏览器提供渐 进式的增强体验。
可能，渐进增强被普遍认为是开发网站的最佳实践。然而，冰冷的现实是，我虽然打心 眼里喜欢渐进增强并用它来制作网站，但很多情况下可以说我是用优雅降级的方式来做的。可能有时你肯定会选择（或是被逼无奈）去实现一些现代浏览器提供的增强功能， 可能是为了那些老弱的IE。
该不该修复老版本 IE？
对于这个问题的观点：虽然通过打补丁的方式可以为老版本浏览器增加大多数 html5 和 CSS3 特性，但导致的结果是用户体验将严重依赖 JavaScript，且可用性相较于不使用 补丁有所减弱。毫无疑问，影响这个抉择最关键的因素是性能。因为只是告诉你能这么做，但并不代表你应该这么做！
此外，即使不使用补丁，为了能让 IE6 和 IE7 （以及少量 IE8 和 IE9）的页面渲染效果尽可能与现代标准浏览器类似，开发、测试和配置专属 CSS 代码所花费的时间，至少也和为现代浏览器提供渐进增强所花费的时间一样多——这很让人头疼！难道你打算你和你的客户就准备这样用掉开发时间？
Modernizr
Modernizr是一个用于检测浏览器功能的开源JavaScript库。Modernizr的第一版由Fauk Ate? 开发，目前由 Alex Sexton 和才华横溢的 Paul Irish 担当首席开发人员。一些知名的公司已 经开始使用这个工具，包括 Twitter、微软和谷歌。当然，说这些不只是为了吹捧 Modernizr 的开发团队（他们确实值得吹捧），更重要的是想说明 Modernizr 是 JavaScript 杰作，绝不会昙花一现。坦率地说，它是一个值得深入理解和学习的工具。 那它到底做了什么？既能给老版本浏览器打补丁，又能保证新浏览器渐进增强的用户体 验，它是怎么做到的，而我们又如何使其听任差遣呢？
从实际操作来看，Modernizr 默认做的事很少，除了（在你选择的情况下）给不支持 HTML5 标签的浏览器如 IE6、7、8 追加一点由 Remy Sharp 开发的 HTML5 垫片脚本，使其可以 识别、等 HTML5 元素之外，它主要做的就是浏览器“功能检测”。 因此，它知道浏览器是否支持各种 HTML5 和 CSS3 特性。这就为我们根据浏览器特性采 取不同行动提供了依据，剩下的事情就是程我们序员如何具体实施了。看下面这段代码：
存放在根目录JS文件夹中
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-
scale=1" />
<title>And the winner isn't…</title>
<link href="css/main.css" rel="stylesheet" />
<script src="js/modernizr.js"></script>
</head>
使用了 Modernizr 之后，再通过 Firebug 或类似开发工具查看页面源代码时，就会看到 HTML标签上追加了一堆不同的类名。在 Firefox v9.01 中查看的示例效果如下：
<html class="js flexbox geolocation postmessage indexeddb history websockets rgba
hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow
opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms
no-csstransforms3d csstransitions fontface generatedcontent video audio
localstorage sessionstorage applicationcache">
还有更多的Modernizr 所实用的方法（如何使用Modernizr辅助修正样式问题？如何使用Modernizr让老版本IE支持HTML5 元素？如何给IE6、7、8 追加min/max媒体查询功能？如何使用Modernizr按需加载资源？），想知道的加前端群：621071874，这些使用方法都在群里，欢迎各位大佬和小白的加入。
必要时将导航链接转换为下拉菜单
看代码：
。首先下载 Responsive Menu 脚本 （https://github.com/mattkersley/Responsive-Menu），和以前一样将其（jquery.mobilemenu.js） 存放在 js 文件夹。接下来再给每个页面的导航链接部分设置一个 id：
<nav role="navigation">
<ul id="mainNav">
<li><a href="why.html">Why?</a></li>
<li><a href="offline.html">Offline</a></li>
<li><a href="redemption.html">Redemption</a></li>
<li><a href="video.html">Videos/clips</a></li>
<li><a href="quotes.html">Quotes</a></li>
<li><a href="3Dquiz.html">Quiz</a></li>
</ul>
</nav>
接下来，在 conditional.js 文件中追加如下代码：
Modernizr.load([
{
test: Modernizr.mq('only all'),
nope: 'js/respond.min.js'
},
{
// 如果 max-width 等于 600px，则加载菜单转换脚本
test: Modernizr.mq('only screen and (max-width: 600px)'),
yep : ['js/jquery-1.7.1.js', 'js/jquery.mobilemenu.js'],
complete : function () {
// 资源完全加载后运行
$(document).ready(function(){
$('#mainNav').mobileMenu({
switchWidth: 600, //转换宽度 (用 px 表示)
topOptionText: 'Select a page', //第一个选项的内容
indentString: ' ' //缩进嵌套选项的字符串
});
});
}
}
]);
在为老版本 IE 按需加载 Respond.js 之后，我们增加了另一个检测：
test: Modernizr.mq('only screen and (max-width: 600px)'),
这个检测是问浏览器视口是否能识别媒体查询，如果可以，那视口的最大宽度是否是 600 像素？如果是，则：
yep : ['js/jquery-1.7.1.js', 'js/jquery.mobilemenu.js']
上面这行代码同时加载了 jQuery 库文件和 Responsive Menu 文件，
complete : function () {
……其他代码……
complete 这块代码意思是，一旦文件下载并执行之后，运行如下代码：
$(document).ready(function(){
$('#mainNav').mobileMenu({
switchWidth: 600, //转换宽度 (用 px 表示)
topOptionText: 'Select a page', //第一个选项的内容
indentString: ' ' //缩进嵌套选项的字符串
});
});
这里有几个针对 Responsive Menu 的配置参数。最重要的第一个参数，定义了在视口多宽 的情况下，将导航链接转换为下拉菜单（此处我设置为 600px）。 此处我们使用 Modernizr 又一次保证了不需要该效果的用户不会加载多余代码，而需要的 用户则会享受到这种渐进增强体验。 对于网页设计师，尤其是那些不熟悉 JavaScript 代码的人来说，一看到 Modernizr 就会心 生畏惧。Modernizr 当然值得深入挖掘，但这个简单的教程已经足够说明 Modernizr 的用 处了，它在你将来的响应式项目中一定会大显身手。
高分辨率设备（未来趋势）
设备及其性能总是与时俱进。事实上，我们不仅仅要面对不同的视口尺寸，还得考虑高 分辨率显示屏。iPhone 4 是第一款被广泛使用的高分辨率设备。它的屏幕大小为 960 乘以 640 像素，分辨率为每英寸 326 个像素，是上一个版本 iPhone（iPhone 3GS）及 2011 年 的 15" MacBook Pro 笔记本分辨率的两倍。预计其他设备，从平板电脑到笔记本电脑再到 台式机都会跟风。
对目前的大多数网站来说，采用 HTML5 和 CSS3 的响应式网站设计，绝对是最 佳方案。只要对现有的工作流程、实际做法和开发技巧稍作调整，就可以制作出快速、 灵活、易维护的网站，最重要的是，无论在何种视口下网站都能表现完美。 随着移动设备的日益普及，我们之前从未预见到的新设备也将陆续加入上网冲浪的队伍。 响应式设计无疑为我们提供了一套可靠且面向未来的方法，让我们的响应式网站无论在 任何设备、任何视口中，也无论是否在线，都能快速响应。
热点文章
2021年独生子女补贴新政策是真的吗(独生子女证有有效期吗)
2021年国庆节阅兵仪式几点开始几点结束(2021年国庆节还有阅兵吗)
鼠目寸光一点红是什么生肖动物（鼠目寸光一点红）指什么生肖，紧密
k0到k9的玩法大全（强制gc的玩法和注意事项）
入土为安是什么生肖《入土为安》打一个生肖动物，词语解释
浙江12月底全面停工是真的吗(浙江什么时候放假停工)
如何做t(t怎么把p做哭)
北京口碑最差的三甲医院（北京301医院最擅长什么）