Create gh-pages branch via GitHub
This commit is contained in:
Jacob Rossi
GitHub
Родитель
edc3a77d74
Коммит
77906131f7
|
|
@ -0,0 +1,135 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<title>Videotest by MicrosoftEdge</title>
|
||||
|
||||
<link rel="stylesheet" href="stylesheets/styles.css">
|
||||
<link rel="stylesheet" href="stylesheets/github-light.css">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<header>
|
||||
<h1>Videotest</h1>
|
||||
<p>Video streaming battery rundown test methodology </p>
|
||||
|
||||
<p class="view"><a href="https://github.com/MicrosoftEdge/videotest">View the Project on GitHub <small>MicrosoftEdge/videotest</small></a></p>
|
||||
|
||||
|
||||
<ul>
|
||||
<li><a href="https://github.com/MicrosoftEdge/videotest/zipball/master">Download <strong>ZIP File</strong></a></li>
|
||||
<li><a href="https://github.com/MicrosoftEdge/videotest/tarball/master">Download <strong>TAR Ball</strong></a></li>
|
||||
<li><a href="https://github.com/MicrosoftEdge/videotest">View On <strong>GitHub</strong></a></li>
|
||||
</ul>
|
||||
</header>
|
||||
<section>
|
||||
<h1>
|
||||
<a id="video-streaming-battery-rundown-test-methodology" class="anchor" href="#video-streaming-battery-rundown-test-methodology" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Video streaming battery rundown test methodology</h1>
|
||||
|
||||
<p>Brandon Heenan<br>
|
||||
<em>Program Manager, Microsoft Edge</em></p>
|
||||
|
||||
<h2>
|
||||
<a id="summary" class="anchor" href="#summary" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Summary</h2>
|
||||
|
||||
<p>We measured the time it took four identical Surface Book laptops to run fully through their batteries while streaming video. The results were recorded with a camera and a time lapse was made available publicly:</p>
|
||||
|
||||
<p><a href="https://www.youtube.com/watch?v=rjrxOOfi54k"><img src="https://github.com/MicrosoftEdge/videotest/blob/master/videotest-poster.png?raw=true" alt="Battery tests on streaming video comparing Google Chrome, Mozilla Firefox, and Opera."></a></p>
|
||||
|
||||
<p>The results showed that Microsoft Edge (7:22:07) lasted: </p>
|
||||
|
||||
<ul>
|
||||
<li>70% longer than Google Chrome (4:19:50) </li>
|
||||
<li>43% longer than Mozilla Firefox (5:09:30) </li>
|
||||
<li>17% longer than Opera (6:18:33)</li>
|
||||
</ul>
|
||||
|
||||
<h2>
|
||||
<a id="methodology" class="anchor" href="#methodology" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Methodology</h2>
|
||||
|
||||
<h3>
|
||||
<a id="computer-setup" class="anchor" href="#computer-setup" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Computer setup</h3>
|
||||
|
||||
<p>The test was performed on four Surface Books (256GB disk, Core i5, 8GB RAM, integrated graphics) running Windows 10 (10586.318 th2_release). These computers were configured to the following settings, to increase consistency between measures and reduce tasks that may start during the measurement and interfere with the results, while still representing a realistic user setup: </p>
|
||||
|
||||
<ul>
|
||||
<li>Display brightness was set to 75% </li>
|
||||
<li>Location was disabled</li>
|
||||
<li>Devices were connected to a wireless network</li>
|
||||
<li>Defender cache was completely built</li>
|
||||
<li>Defragmentation was temporarily disabled</li>
|
||||
<li>Ambient light sensor was temporarily disabled</li>
|
||||
<li>All queued Ngen complication jobs were completed</li>
|
||||
<li>Windows Update was temporarily disabled</li>
|
||||
<li>“New network found” prompts were disabled</li>
|
||||
<li>Windows Error Reporting was temporarily disabled</li>
|
||||
<li>Queued idle tasks were forced to complete prior to the test</li>
|
||||
<li>Windows Defender was running normally and up to date</li>
|
||||
<li>Devices were fully changed before being physically unplugged and running on battery for the test</li>
|
||||
<li>Volume was turned to 25%</li>
|
||||
<li>Battery Saver was off, but enabled automatically when the battery reached 20%. Device was set to lower screen brightness when Windows battery saver started.</li>
|
||||
<li>BitLocker was disabled </li>
|
||||
</ul>
|
||||
|
||||
<h2>
|
||||
<a id="browsers" class="anchor" href="#browsers" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Browsers</h2>
|
||||
|
||||
<p>The specific versions of the browsers tested were: </p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Browser</th>
|
||||
<th>Version</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Edge</td>
|
||||
<td>Microsoft Edge 25.10586.0.0<br>Microsoft EdgeHTML 13.10586<br>“Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586”</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Chrome</td>
|
||||
<td>Google Chrome 51.0.2704.63 m (64 bit)<br>“Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.63 Safari/537.36”</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td>Mozilla Firefox 46.0.1<br>Mozilla83 – 1.0<br>“Mozilla/5.0 (Windows NT 10.0; WOW64; rv:46.0) Gecko/20100101 Firefox/46.0”</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Opera</td>
|
||||
<td>Opera 38.0 38.0.2220.29<br>“Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.63 Safari/537.36 OPR/38.0.2220.29”<br>Power saver enabled</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>
|
||||
<a id="pre-test" class="anchor" href="#pre-test" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Pre-Test</h2>
|
||||
|
||||
<p>While plugged in, each respective browser was navigated to Netflix.com and logged into the same account. The show <strong>“Nature: Animal Misfits”</strong> was queued and paused immediately on each browser. Each computer was verified to have brightness set to 75% (with ambient brightness disabled) and volume to 25%. </p>
|
||||
|
||||
<h2>
|
||||
<a id="test" class="anchor" href="#test" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Test</h2>
|
||||
|
||||
<ol>
|
||||
<li>Start recording with camera</li>
|
||||
<li>Unplug the power bar that all four devices are charging from, ensuring they switch to battery at the same time</li>
|
||||
<li>Immediately push play on all devices and start timing</li>
|
||||
<li>When there’s less than 5 min remaining in the show, manually use the seek control to reset all devices to the beginning</li>
|
||||
<li>Repeat until all devices have run out of battery, recording the time for each of them</li>
|
||||
</ol>
|
||||
</section>
|
||||
<footer>
|
||||
<p>This project is maintained by <a href="https://github.com/MicrosoftEdge">MicrosoftEdge</a></p>
|
||||
<p><small>Hosted on GitHub Pages — Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="javascripts/scale.fix.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
var metas = document.getElementsByTagName('meta');
|
||||
var i;
|
||||
if (navigator.userAgent.match(/iPhone/i)) {
|
||||
for (i=0; i<metas.length; i++) {
|
||||
if (metas[i].name == "viewport") {
|
||||
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
|
||||
}
|
||||
}
|
||||
document.addEventListener("gesturestart", gestureStart, false);
|
||||
}
|
||||
function gestureStart() {
|
||||
for (i=0; i<metas.length; i++) {
|
||||
if (metas[i].name == "viewport") {
|
||||
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"name": "Videotest",
|
||||
"tagline": "Video streaming battery rundown test methodology ",
|
||||
"body": "# Video streaming battery rundown test methodology \r\n\r\nBrandon Heenan<br>\r\n_Program Manager, Microsoft Edge_\r\n\r\n## Summary\r\n\r\nWe measured the time it took four identical Surface Book laptops to run fully through their batteries while streaming video. The results were recorded with a camera and a time lapse was made available publicly:\r\n\r\n[](https://www.youtube.com/watch?v=rjrxOOfi54k)\r\n\r\nThe results showed that Microsoft Edge (7:22:07) lasted: \r\n* 70% longer than Google Chrome (4:19:50) \r\n* 43% longer than Mozilla Firefox (5:09:30) \r\n* 17% longer than Opera (6:18:33)\r\n\r\n## Methodology\r\n\r\n### Computer setup\r\n\r\nThe test was performed on four Surface Books (256GB disk, Core i5, 8GB RAM, integrated graphics) running Windows 10 (10586.318 th2_release). These computers were configured to the following settings, to increase consistency between measures and reduce tasks that may start during the measurement and interfere with the results, while still representing a realistic user setup: \r\n\r\n* Display brightness was set to 75% \r\n* Location was disabled\r\n* Devices were connected to a wireless network\r\n* Defender cache was completely built\r\n* Defragmentation was temporarily disabled\r\n* Ambient light sensor was temporarily disabled\r\n* All queued Ngen complication jobs were completed\r\n* Windows Update was temporarily disabled\r\n* “New network found” prompts were disabled\r\n* Windows Error Reporting was temporarily disabled\r\n* Queued idle tasks were forced to complete prior to the test\r\n* Windows Defender was running normally and up to date\r\n* Devices were fully changed before being physically unplugged and running on battery for the test\r\n* Volume was turned to 25%\r\n* Battery Saver was off, but enabled automatically when the battery reached 20%. Device was set to lower screen brightness when Windows battery saver started.\r\n* BitLocker was disabled \r\n\r\n## Browsers\r\nThe specific versions of the browsers tested were: \r\n\r\n| Browser | Version |\r\n| ------- | ------- |\r\n| Edge | Microsoft Edge 25.10586.0.0<br>Microsoft EdgeHTML 13.10586<br>“Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586” |\r\n| Chrome | Google Chrome 51.0.2704.63 m (64 bit)<br>“Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.63 Safari/537.36” |\r\n| Firefox | Mozilla Firefox 46.0.1<br>Mozilla83 – 1.0<br>“Mozilla/5.0 (Windows NT 10.0; WOW64; rv:46.0) Gecko/20100101 Firefox/46.0” |\r\n| Opera | Opera 38.0 38.0.2220.29<br>“Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.63 Safari/537.36 OPR/38.0.2220.29”<br>Power saver enabled |\r\n\r\n## Pre-Test\r\n\r\nWhile plugged in, each respective browser was navigated to Netflix.com and logged into the same account. The show **“Nature: Animal Misfits”** was queued and paused immediately on each browser. Each computer was verified to have brightness set to 75% (with ambient brightness disabled) and volume to 25%. \r\n\r\n## Test\r\n\r\n1. Start recording with camera\r\n2. Unplug the power bar that all four devices are charging from, ensuring they switch to battery at the same time\r\n3. Immediately push play on all devices and start timing\r\n4. When there’s less than 5 min remaining in the show, manually use the seek control to reset all devices to the beginning\r\n5. Repeat until all devices have run out of battery, recording the time for each of them\r\n",
|
||||
"note": "Don't delete this file! It's used internally to help with page regeneration."
|
||||
}
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
/*
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 GitHub, Inc.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
||||
*/
|
||||
|
||||
.pl-c /* comment */ {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.pl-c1 /* constant, variable.other.constant, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header */,
|
||||
.pl-s .pl-v /* string variable */ {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.pl-e /* entity */,
|
||||
.pl-en /* entity.name */ {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.pl-smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
|
||||
.pl-s .pl-s1 /* string source */ {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.pl-ent /* entity.name.tag */ {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.pl-k /* keyword, storage, storage.type */ {
|
||||
color: #a71d5d;
|
||||
}
|
||||
|
||||
.pl-s /* string */,
|
||||
.pl-pds /* punctuation.definition.string, string.regexp.character-class */,
|
||||
.pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
|
||||
.pl-sr /* string.regexp */,
|
||||
.pl-sr .pl-cce /* string.regexp constant.character.escape */,
|
||||
.pl-sr .pl-sre /* string.regexp source.ruby.embedded */,
|
||||
.pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
|
||||
color: #183691;
|
||||
}
|
||||
|
||||
.pl-v /* variable */ {
|
||||
color: #ed6a43;
|
||||
}
|
||||
|
||||
.pl-id /* invalid.deprecated */ {
|
||||
color: #b52a1d;
|
||||
}
|
||||
|
||||
.pl-ii /* invalid.illegal */ {
|
||||
color: #f8f8f8;
|
||||
background-color: #b52a1d;
|
||||
}
|
||||
|
||||
.pl-sr .pl-cce /* string.regexp constant.character.escape */ {
|
||||
font-weight: bold;
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.pl-ml /* markup.list */ {
|
||||
color: #693a17;
|
||||
}
|
||||
|
||||
.pl-mh /* markup.heading */,
|
||||
.pl-mh .pl-en /* markup.heading entity.name */,
|
||||
.pl-ms /* meta.separator */ {
|
||||
font-weight: bold;
|
||||
color: #1d3e81;
|
||||
}
|
||||
|
||||
.pl-mq /* markup.quote */ {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
.pl-mi /* markup.italic */ {
|
||||
font-style: italic;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.pl-mb /* markup.bold */ {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.pl-md /* markup.deleted, meta.diff.header.from-file */ {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
|
||||
.pl-mi1 /* markup.inserted, meta.diff.header.to-file */ {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
|
||||
.pl-mdr /* meta.diff.range */ {
|
||||
font-weight: bold;
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.pl-mo /* meta.output */ {
|
||||
color: #1d3e81;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,324 @@
|
|||
@font-face {
|
||||
font-family: 'Noto Sans';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
src: url('../fonts/Noto-Sans-regular/Noto-Sans-regular.eot');
|
||||
src: url('../fonts/Noto-Sans-regular/Noto-Sans-regular.eot?#iefix') format('embedded-opentype'),
|
||||
local('Noto Sans'),
|
||||
local('Noto-Sans-regular'),
|
||||
url('../fonts/Noto-Sans-regular/Noto-Sans-regular.woff2') format('woff2'),
|
||||
url('../fonts/Noto-Sans-regular/Noto-Sans-regular.woff') format('woff'),
|
||||
url('../fonts/Noto-Sans-regular/Noto-Sans-regular.ttf') format('truetype'),
|
||||
url('../fonts/Noto-Sans-regular/Noto-Sans-regular.svg#NotoSans') format('svg');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Noto Sans';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
src: url('../fonts/Noto-Sans-700/Noto-Sans-700.eot');
|
||||
src: url('../fonts/Noto-Sans-700/Noto-Sans-700.eot?#iefix') format('embedded-opentype'),
|
||||
local('Noto Sans Bold'),
|
||||
local('Noto-Sans-700'),
|
||||
url('../fonts/Noto-Sans-700/Noto-Sans-700.woff2') format('woff2'),
|
||||
url('../fonts/Noto-Sans-700/Noto-Sans-700.woff') format('woff'),
|
||||
url('../fonts/Noto-Sans-700/Noto-Sans-700.ttf') format('truetype'),
|
||||
url('../fonts/Noto-Sans-700/Noto-Sans-700.svg#NotoSans') format('svg');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Noto Sans';
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
src: url('../fonts/Noto-Sans-italic/Noto-Sans-italic.eot');
|
||||
src: url('../fonts/Noto-Sans-italic/Noto-Sans-italic.eot?#iefix') format('embedded-opentype'),
|
||||
local('Noto Sans Italic'),
|
||||
local('Noto-Sans-italic'),
|
||||
url('../fonts/Noto-Sans-italic/Noto-Sans-italic.woff2') format('woff2'),
|
||||
url('../fonts/Noto-Sans-italic/Noto-Sans-italic.woff') format('woff'),
|
||||
url('../fonts/Noto-Sans-italic/Noto-Sans-italic.ttf') format('truetype'),
|
||||
url('../fonts/Noto-Sans-italic/Noto-Sans-italic.svg#NotoSans') format('svg');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Noto Sans';
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
src: url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot');
|
||||
src: url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot?#iefix') format('embedded-opentype'),
|
||||
local('Noto Sans Bold Italic'),
|
||||
local('Noto-Sans-700italic'),
|
||||
url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff2') format('woff2'),
|
||||
url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff') format('woff'),
|
||||
url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.ttf') format('truetype'),
|
||||
url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.svg#NotoSans') format('svg');
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #fff;
|
||||
padding:50px;
|
||||
font: 14px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color:#727272;
|
||||
font-weight:400;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color:#222;
|
||||
margin:0 0 20px;
|
||||
}
|
||||
|
||||
p, ul, ol, table, pre, dl {
|
||||
margin:0 0 20px;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
line-height:1.1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size:28px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color:#393939;
|
||||
}
|
||||
|
||||
h3, h4, h5, h6 {
|
||||
color:#494949;
|
||||
}
|
||||
|
||||
a {
|
||||
color:#39c;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color:#069;
|
||||
}
|
||||
|
||||
a small {
|
||||
font-size:11px;
|
||||
color:#777;
|
||||
margin-top:-0.3em;
|
||||
display:block;
|
||||
}
|
||||
|
||||
a:hover small {
|
||||
color:#777;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width:860px;
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left:1px solid #e5e5e5;
|
||||
margin:0;
|
||||
padding:0 0 0 20px;
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
code, pre {
|
||||
font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, Consolas, Liberation Mono, DejaVu Sans Mono, Courier New, monospace;
|
||||
color:#333;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding:8px 15px;
|
||||
background: #f8f8f8;
|
||||
border-radius:5px;
|
||||
border:1px solid #e5e5e5;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width:100%;
|
||||
border-collapse:collapse;
|
||||
}
|
||||
|
||||
th, td {
|
||||
text-align:left;
|
||||
padding:5px 10px;
|
||||
border-bottom:1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
dt {
|
||||
color:#444;
|
||||
font-weight:700;
|
||||
}
|
||||
|
||||
th {
|
||||
color:#444;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width:100%;
|
||||
}
|
||||
|
||||
header {
|
||||
width:270px;
|
||||
float:left;
|
||||
position:fixed;
|
||||
-webkit-font-smoothing:subpixel-antialiased;
|
||||
}
|
||||
|
||||
header ul {
|
||||
list-style:none;
|
||||
height:40px;
|
||||
padding:0;
|
||||
background: #f4f4f4;
|
||||
border-radius:5px;
|
||||
border:1px solid #e0e0e0;
|
||||
width:270px;
|
||||
}
|
||||
|
||||
header li {
|
||||
width:89px;
|
||||
float:left;
|
||||
border-right:1px solid #e0e0e0;
|
||||
height:40px;
|
||||
}
|
||||
|
||||
header li:first-child a {
|
||||
border-radius:5px 0 0 5px;
|
||||
}
|
||||
|
||||
header li:last-child a {
|
||||
border-radius:0 5px 5px 0;
|
||||
}
|
||||
|
||||
header ul a {
|
||||
line-height:1;
|
||||
font-size:11px;
|
||||
color:#999;
|
||||
display:block;
|
||||
text-align:center;
|
||||
padding-top:6px;
|
||||
height:34px;
|
||||
}
|
||||
|
||||
header ul a:hover {
|
||||
color:#999;
|
||||
}
|
||||
|
||||
header ul a:active {
|
||||
background-color:#f0f0f0;
|
||||
}
|
||||
|
||||
strong {
|
||||
color:#222;
|
||||
font-weight:700;
|
||||
}
|
||||
|
||||
header ul li + li + li {
|
||||
border-right:none;
|
||||
width:89px;
|
||||
}
|
||||
|
||||
header ul a strong {
|
||||
font-size:14px;
|
||||
display:block;
|
||||
color:#222;
|
||||
}
|
||||
|
||||
section {
|
||||
width:500px;
|
||||
float:right;
|
||||
padding-bottom:50px;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size:11px;
|
||||
}
|
||||
|
||||
hr {
|
||||
border:0;
|
||||
background:#e5e5e5;
|
||||
height:1px;
|
||||
margin:0 0 20px;
|
||||
}
|
||||
|
||||
footer {
|
||||
width:270px;
|
||||
float:left;
|
||||
position:fixed;
|
||||
bottom:50px;
|
||||
-webkit-font-smoothing:subpixel-antialiased;
|
||||
}
|
||||
|
||||
@media print, screen and (max-width: 960px) {
|
||||
|
||||
div.wrapper {
|
||||
width:auto;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
header, section, footer {
|
||||
float:none;
|
||||
position:static;
|
||||
width:auto;
|
||||
}
|
||||
|
||||
header {
|
||||
padding-right:320px;
|
||||
}
|
||||
|
||||
section {
|
||||
border:1px solid #e5e5e5;
|
||||
border-width:1px 0;
|
||||
padding:20px 0;
|
||||
margin:0 0 20px;
|
||||
}
|
||||
|
||||
header a small {
|
||||
display:inline;
|
||||
}
|
||||
|
||||
header ul {
|
||||
position:absolute;
|
||||
right:50px;
|
||||
top:52px;
|
||||
}
|
||||
}
|
||||
|
||||
@media print, screen and (max-width: 720px) {
|
||||
body {
|
||||
word-wrap:break-word;
|
||||
}
|
||||
|
||||
header {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
header ul, header p.view {
|
||||
position:static;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
word-wrap:normal;
|
||||
}
|
||||
}
|
||||
|
||||
@media print, screen and (max-width: 480px) {
|
||||
body {
|
||||
padding:15px;
|
||||
}
|
||||
|
||||
header ul {
|
||||
width:99%;
|
||||
}
|
||||
|
||||
header li, header ul li + li + li {
|
||||
width:33%;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
body {
|
||||
padding:0.4in;
|
||||
font-size:12pt;
|
||||
color:#444;
|
||||
}
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче