CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. CSS3 Media Queries (demo) Check my demo and resize your browser window to see it in action. Max Width The following CSS will apply if the viewing area is smaller than 600px. If you want to link to a separate stylesheet, put the following line of code in between the <head> tag. Min Width The following CSS will apply if the viewing area is greater than 900px. Multiple Media Queries You can combine multiple media queries. Device Width The following code will apply if the max-device-width is 480px (eg. iPhone display). For iPhone 4 The following stylesheet is specifically for iPhone 4 (credits: Thomas Maier). For iPad Sample Sites Colly
Related: MEDIA QUERIES
Media QueriesAbstract HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types that have been defined. A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Status of This Document This section describes the status of this document at the time of its publication. A W3C Recommendation is a mature document that has been widely reviewed and has been shown to be implementable. This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. Please see the Working Group's implementation report and the Media Queries Test Suite. Also see the Disposition of comments and a list of changes relative to the previous Proposed Recommendation. 1. 3.
Smartphone Browser LandscapeUsers expect websites to work on their mobile phones. In two to three years, mobile support will become standard for any site. Web developers must add mobile web development to their skill set or risk losing clients. How do you make websites mobile compatible? The answer is obvious: By testing them on all mobile phones, and by solving the problems you encounter. In this article, I’ll give you an overview of the mobile web market, as well as phone platforms and their browsers, so that you can decide which mobile devices to test on. The smartphone market#section1 Web developers should concentrate their testing efforts on smartphones. A smartphone is a phone that runs a recognizable OS on which the user can install applications. The smartphone market is divided into several submarkets, each of which has a distinct audience. Notes: In 2009, about 175 million smartphones were sold worldwide. A game of platforms#section2 The current fight in the mobile world is about platforms. What about IE?
Pinboard DocumentationDocumentation » Installing The Theme To install themes with the WordPress theme uploader: Download the theme.zip from the member areaLogin to wp-adminGo to Appearance > ThemesClick on the "Install Themes" tab, then click on the "Upload" linkUpload the theme.zip (note: it is the theme.zip, not theme-psd.zip) that you just downloaded from the member areaActivate the theme You can also install the theme with a FTP software, read this tutorial for more details. Sample Content If you are starting a new site and would like to import the sample content as seen on the demo site, here are the steps: Go to Tools > Import (yoursite.com/wp-admin/import.php). NOTE: The images shown on the demo site are not part of the theme package, nor are they included in the sample content. To set up the social media links: Go to Themify > Settings > Social Links tabThe theme comes with some pre-filled social links. Displaying The Social Media Links Exclude Search Form To create a custom navigation menu: Site Logo
media queries for common device breakpoints | Responsive Web DesignThe @media query is 1/3 of the recipe for responsive design. It is the key ingredient that, in it’s simplest form, allows specified CSS to be applied depending on the device and whether it matches the media query criteria. Before you start copying and pasting below, read why you don’t need device specific viewports.CSS3 Media QueriesРазрешение экрана в наши дни колеблется от 320px (iPhone) до 2560px (большие мониторы) или даже выше. Пользователи больше не просматривают сайты только на настольных компьютерах. Теперь пользователи используют мобильные телефоны, небольшие ноутбуки, планшетные устройства, такие как iPad или Playbook для доступа в интернет. Поэтому, традиционный дизайн с фиксированной шириной больше не работает. Дизайн должен быть адаптивным. Структура должна автоматически изменяться с учетом всех разрешений дисплеев. Для начала посмотрим это в действии. Пред началом посмотрите на финальное демо, что бы увидеть, как хорошо это выглядит. Другие примеры Если вы хотите увидеть больше примеров, посмотрите следующие темы для WordPress, которые я сделал используя media queries: iTheme2, Funki, Minblr и Wumblr. Обзор Контейнер страницы имеет ширину 980px для любого разрешения, больше 1024px. Не будем останавливаться на подробном описании HTML. HTML5.js Обратите внимание, что в демо используется HTML5. Шаг 1
Media types7.1 Introduction to media types One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc. Certain CSS properties are only designed for certain media (e.g., the 'page-break-before' property only applies to paged media). 7.2 Specifying media-dependent style sheets There are currently two ways to specify media dependencies for style sheets: Specify the target medium from a style sheet with the @media or @import at-rules. The @import rule is defined in the chapter on the cascade. 7.2.1 The @media rule An @media rule specifies the target media types (separated by commas) of a set of statements (delimited by curly braces). Style rules outside of @media rules apply to all media types that the style sheet applies to. 7.3 Recognized media types The names chosen for CSS media types reflect target devices for which the relevant properties make sense. all tty