draft:0.1
Media Query
Twenty Thirteen
@media (max-width: 1599px)
@media (max-width: 1069px)
@media (max-width: 999px)
@media (max-width: 767px)
@media (max-width: 643px)
@media (max-width: 359px)
Twenty Twelve
@media print {}
@media screen and (min-width: 960px) {}
@media screen and (min-width: 600px) {}
Twentyeleven
@media print {}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {}
@media (max-width: 450px) {}
@media (max-width: 650px) {}
@media (max-width: 800px) {}
CSS volume
| テーマ | 行数 |
| twenty ten | 1359 |
| twenty eleven | 2694 |
| twenty twelve | 1646 |
| Twenty Thirteen | 3103 |
Post formats
- twentyeleven
- array( ‘aside’, ‘link’, ‘gallery’, ‘status’, ‘quote’, ‘image’ )
- twentytwelve
- array( ‘aside’, ‘image’, ‘link’, ‘quote’ )
- Twenty Thirteen
- array(‘aside’, ‘audio’, ‘chat’, ‘gallery’, ‘image’, ‘link’, ‘quote’, ‘status’, ‘video’);
CSS
サイズの、remは、利用されなくなり、px em %で記述されるようになった模様
calc()使ってしまいましたね
.toggled-on .menu-toggle:after {
content: "\f500";
vertical-align: -webkit-calc(2px);
vertical-align:calc(2px);
}
レティーナ対応
/* Retina-specific styles. */
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
.site-header .searchform [type="search"] {
background-image: url(images/search-icon-2x.png);
}
.format-audio .audio-content,
.format-status .entry-content:before,
.format-status .entry-meta:before,
.comment-list > li:after,
.comment-list .children > li:before {
background-image: url(images/dotted-line-2x.png);
}
}
アイコンフォント
/**
* Genericons, a flexible icon-font.
* License: GPL version 2 or any later version with font exception (http://www.gnu.org/licenses/gpl-faq.html#FontException)
* See also LICENSE.txt and COPYING.txt in the ./fonts directory.
* Thanks to FontSquirrel for web-font conversion!
* More info: genericons.com
*/
@font-face {
font-family: Genericons;
src: url(fonts/genericons-regular-webfont.eot);
src: url(fonts/genericons-regular-webfont.eot?#iefix) format("embedded-opentype"),
url(fonts/genericons-regular-webfont.woff) format("woff"),
url(fonts/genericons-regular-webfont.ttf) format("truetype"),
url(fonts/genericons-regular-webfont.svg#genericonsregular) format("svg");
font-weight: normal;
font-style: normal;
}
リセットはノーマライズ
/** * 1.0 Reset * * Modified from Normalize.css to provide cross-browser consistency and a smart * default styling of HTML elements. * * @see http://git.io/normalize * ---------------------------------------------------------------------------- */
Retina Display
| Header Iimage Size | width | height |
| twenty eleven header | 1000px | 288px |
| thumbnail | 230px | 66px |
| Twenty Thirteen header | 3200px | 460px |
| thumbnail | 460px | 66px |