Responsive html design. Basic HTML structure
Internet users browse websites on different devices with different screen sizes. Screen sizes are constantly changing, so it is important that the site adapts to any of them. There are two main approaches to creating websites that are easily adaptable for different types devices:
Responsive Design (RWD) - responsive design - designing a site with certain property values, for example, flexible mesh layouts that allow the same layout to work on different devices;
Adaptive Design (AWD) adaptive design, or dynamic display - designing a site with conditions that change depending on the device, based on several fixed-width layouts.
1. Responsive Design TechniquesPhilosophy responsive web design is that the site was convenient to view from any device, regardless of screen size. The phrase responsive design was coined by Ethan Marcotte in 2011. main feature responsive web design - due to the fluid grid, the layout automatically responds to changes in screen size, inflating or contracting like a balloon.
Responsive Web Design combines three techniques - flexible grid-based layout, flexible images and media queries.
Layout flexibility based on usage relative units dimensions instead of fixed pixel values, allowing the width to be adjusted to suit the available space.
Flexibility of text content is achieved by calculating font sizes relative to browsers' default font size of 16px, for example for a fixed size of font-size: 42px the relative size is 42px / 16px = 2.625em.
Problem flexible images solved using the img rule (width: 100%; max-width: 100%;) for all images on the site. This rule ensures that images are never wider than their containers and never exceed their true dimensions on big screens.
Media queries modify styles based on device characteristics associated with displaying content, including screen type, width, height, orientation, and resolution. Media queries create a responsive design that applies appropriate styles to each screen size.
Rice. 1. Responsive Design Additional Responsive Design Techniques Scalable Vector graphics- use svg images that scale to any size without losing quality and look good on Retina displays.
Card Interfaces - Use so-called card interfaces - rectangular shapes with rounded corners that represent containers for content. Such blocks are self-contained interface units and are easy to move around the layout.
Rice. 2. Pinterest, card-based layout Leave only the essentials - good welcome, especially for responsive design. Create responsive and friendly minimalist interfaces that are becoming increasingly popular nowadays.
Rice. 3. Hotellook, minimalism in web design Prioritize and hide content correctly - use hidden elements controls, especially for devices with small screens. Pop-up windows, tabs, off-canvas menus and other similar techniques will help reduce the number of elements on the page. Freeing up space from unnecessary elements, you will make the interface convenient and user friendly.
Create a large clickable space for your buttons - the larger the clickable area of a button, the easier it is for the user to interact with it.
Add interactivity to your interfaces - in response to a user action, create a response action - an animation that will work when you hover over an element on desktop devices and when you touch the element on mobile devices Oh.
2. Customizing the viewport using the viewport meta tagTo mobile browsers for the Android and iOS operating systems, the size of the site pages was not automatically changed; a special tag with the name="viewport" attribute is used. IN this tag it is allowed to set a specific value for the width and initial-scale parameters:
— initial-scale=1 means that the page size in the browser will be equal to 100% of the viewport size. That is, the ratio between the physical pixel and the css pixel will be 1:1;
— width=device-width means that the page width will be equal to 100% of the width of the window of any browser. That is, the width of the site page corresponds to the width of the device, so it does not need to be scaled.
In this example, the content in the browser window will be 2 times larger compared to its physical size.
The tag can also be used to control how much users can increase or decrease the width of the page:
This code will allow you to increase the page width to a value equal to 3 times the width of the device screen and reduce it to half the width of the device screen.
You can deny users the ability to scale using the user-scalable attribute:
3. Universal templates
Most of the layouts used to create responsive web design fall into one of the five pattern categories defined by Luke Wroblewski:
Mostly Fluid (Most rubbery),
Column Drop (Columns under each other),
Layout Shifter (Moving layout),
Tiny Tweaks (Tiny changes),
Off Canvas.
In some cases, a page may use a combination of templates, such as Column Drop and Off Canvas.
A popular layout consisting mainly of rubber mesh. On large or medium-width screens, its size usually remains unchanged; on large screens, only the margins are adjusted. On small screens the rubber grid causes the layout to be recalculated for the main content, and the columns are placed one below the other. The advantage of the template is that it only requires one control point between small screens and large screens. 
Columns are placed one by one vertically if the width of the window cannot display all the content. As a result, the columns will be positioned vertically below each other. The choice of breakpoints for this layout template depends on the content and is determined for each design option separately. 
The most responsive template, as it provides multiple control points for screens of different widths. The main difference with this layout is that instead of recalculating the render tree and placing columns underneath each other, the content is moved. Due to the significant differences between the major breakpoints, maintaining this layout is more challenging, and you may have to change not only the overall layout of the content, but also its elements. 
Template contributes minor changes to the layout, for example, adjusting the font size, changing the size of images, or moving content. It works well on single-column layouts, such as single-page sites and articles with a lot of text. 
Content that is rarely used, such as navigation elements or application menus, is placed off-screen and shown only when the screen size allows it. On smaller screens, content opens with one click. 
Unlike responsive design, Adaptive Web Design focuses on device sizes. It uses multiple static layouts for different types of devices (mobile devices, tablets, desktop computers), based on control (turning) points. That is, layouts are loaded when certain sizes device browser window, and transitions between layouts occur abruptly rather than smoothly.
Typically, responsive layouts have six layout options depending on screen width:
320
480
760
960
1200
1600.
In adaptive layouts, functionality plays a major role, that is, when creating a design, the features of devices are taken into account, for example, touch control for mobile devices or large spaces for desktop monitors.
Basic Responsive Design TechniquesStick to consistency - any website should create trusting relationship with the user so that he feels comfortable when navigating and interacting with him. Consistent design means that when moving to another page on a site, the user does not feel like they are on another site. Pay attention to small details, build a visual hierarchy, and highlight important elements in bold. Use serial color scheme throughout the site, reuse the same elements to various situations, for example, the same design of pop-up notifications.
Use a grid—a 12-column structure is preferable to control column width and space between columns.
5. What is the difference between responsive and adaptive web design
Rice. 4. Responsive and adaptive design on different devices To create responsive layouts, use media queries and relative sizes grid elements specified using % . In responsive design, server-side scripts first determine the type of device the user is trying to access the site on (desktop, phone, or tablet), then loads exactly the version of the page that is most optimized for it. Grid elements are given fixed px sizes.
Therefore, the main difference between these techniques is responsive design - one layout for all devices, adaptive design - one layout for each type of device.
6. Useful services and toolsAndroid emulator for Windows, Linux and Mac OS X. iOS simulator is only available for Mac users OS X and is part of the Xcode package (it can be downloaded for free from the Mac App Store).
A PHP script running on any website detects the screen size and adjusts the image size to fit it, resulting in a small image size on small screens.
Tables of correspondence between the physical dimensions of devices and CSS values for height and width, as well as the pixel-ratio value for mobile devices.
A collection of websites using media queries and responsive web design.
CSS framework based on 12-column layout, maximum 960px. Supported by Chrome, Safari, Firefox, IE 7 and above, mobile versions of browsers.
A set of tools for developing web applications. LESS language, 12-column adaptive layout, support for mobile devices, tablets and monitors, many components, buttons, drop-down menus, own style input fields, lists, headers, labels, icons, alerts, tabs, progress bars, tooltips, accordion, carousel, and so on, various Javascript plugins, Scaffolding support, including the application of Bootstrap style to already generated HTML.
The presence of adaptive design is a necessity - life has proven this with its rake; no Mobile Joomla gives such an effect as direct website adaptation. Today I will tell you how to make a responsive design through editing CSS styles using your head and fingers. It won’t be possible to put everything into detail, since each template has nuances, but I will give an impetus to start adapting.
Adaptation for desktopFirst, we adapt it for the desktop. This is the basic stage, from which dancing with a tambourine begins. Many people mistakenly perceive the world, thinking that with the display of a site on regular computers they have no problems, since someone designed the template, and it looks smooth at normal resolution. With the resolution of your monitor, yes, but what about on a larger screen, how do you look with absolute and pixels on a screen with a resolution of 1920x1080? The purpose of adapting the design is to display the site normally on mobile devices and avoid any problems on large screens.
What are we doing? The main thing is to convert all large values into template css from pixels (px) to percentages (%). There are several rules here:
A little for common understanding. You have a website on which the page width is 1000 px, it has three blocks - a central 800 px and two side sitebars of 100 px. This means that after replacing with percentages, the page size will become 100%, the central container will be 80%, and the side blocks will be 10%. Rough, but understandable. Now a little more specifics.
I have before adaptation (saved for history old file CSS) the main container was styled like this:
#container(margin:0 auto;width:1100px; …
After adaptation it became like this:
#container(margin:0 auto;width:77%;overflow: hidden !important; …
Top menu has changed from:
Top-menu>ul>li ul(width:155px; …
Top-menu>ul>li ul(width:90%; …
And the offset of the content block is implemented with:
#content(margin:0 220px; …
#content(margin:0 20% …
Pay attention to the code:
overflow: hidden !important;
We use it to disable horizontal scrolling, this is useful for mobile adaptation; sometimes it makes sense to only indicate the prohibition of horizontal scrolling using:
overflow-x: hidden !important;
Carry out all work through Firebug or the Google inspector, check with your eyes - the site should look the same after converting px to %. You don’t have to squeeze the screen yet, we haven’t gotten to mobile adaptation yet, we’ve done it yet basic work For large screens.
CSS for mobile devicesThe database has been created, by the way, this is the most difficult stage; now we need to ensure that the site is displayed correctly on all mobile devices. There are few previous manipulations, since it will not be possible to compress everything into a percentage for a small screen. Agree, it’s impossible to see a 10% wide sitebar on a smartphone with a resolution of 320 px.
We'll need to use @media screen and which make style changes for devices with a specific resolution. I first determined by reducing the browser screen at what resolution I was having display problems. Narrowing the screen, I found my point of “curvature”, it starts at a width of 1000px, which means writing down the main mobile styles from here - everything that will be displayed more in the styles of a regular desktop, and less in separate styles.
I have written CSS for mobile devices on Joomla template 1.5 like this:
@media screen and (max-width:500px)(body, tbody(-moz-hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;)
@media screen and (max-width:400px)(td(word-break:break-all;)
@media screen and (max-width:1000px)(td(word-break:break-all;).page-numbers, #footer, #navigation, #header,.logo,.nav-box (display: none !important ;) #content (position: auto; width: 80%;margin-bottom: 0;margin-left: 10%;margin-right: 20%;) #container ( width: 90% !important;).content-box (widht:110%).content-box h1 (font-size: 130%;).content-box h2 (font-size: 110%;).content-box h3 (font-size: 120%;).content -box h4 (font-size: 100%;) .top-menu>div (padding-right: 0px !important;) img(max-width:96% !important;height:auto !important;)
Some specifics on the code.
When the screen width is less than 1000 px, the side sitebars, header, pagination and footer stop displaying. My opinion is that they are mobile version Not needed. This is what the code does:
Page-numbers, #footer, #navigation, #header,.logo,.nav-box (display: none !important;).
By default, in mobile Joomla 3 and higher, the side blocks go down, stretching the page to the point of disgrace, so even on new engines you can correct some things manually.
Other values are also indicated for the blocks of the main container and the content window, and the output of H1-H4 is converted to percentages (pixels suit me for the desktop). Corrections have been made to the output. top menu(fortunately, it needs to be minimized, but this is not critical and I’ll do it later) and the display of pictures has been changed:
img(max-width:96% !important;height:auto !important;).
For them it is indicated that maximum size The width of the images is 96% (with nice indents), and the height is set automatically.
The specifics are over, once again general sense adapting the site (design) using CSS.
Via @media screen and be sure to close the display blocks that are unnecessary for mobile, but convert to % those values that are displayed incorrectly, since they were left in pixels in the desktop version of CSS.
As a result, the user experience when working with Joomla Mobile was 65-70%, with responsive design using CSS, it became 99%. The conclusions are obvious: Yandex and Goole were not tested for adaptability, but now they are passing with a bang.
Hi all! Recently, looking at the statistics of one of my projects, I realized that it was time to learn how to create an adaptive website design, that is, a design that will look good on both desktop computers both laptops and mobile devices. Take a look for yourself, Metrica hints.
How do you like this picture? Perhaps in some topics the percentage mobile traffic It will be less, in others it will be more, but in any case, you can no longer ignore visitors who read you from a smartphone or tablet.
Do you know how mobile device users see your website? Fortunately, there is an excellent service for checking - responsinator.com
Everything here is outrageously simple - you enter the site address and see how it looks on mobile devices. Let's take an example of a blog that everyone is probably familiar with.
At Alexander Borisov's beautiful template, it’s immediately obvious that a lot of money has been invested in the design and layout. However, reading a blog from a phone is very inconvenient, and I would not be surprised if the failure rate among mobile device users is much higher than among those who access the site from a computer.
What to do? There are two ways out: leave everything as it is and watch how other projects bypass yours in the search results. search engines or make your website design responsive.
What is responsive designAt first, I didn’t see the difference between adaptive and “fluid” layout, when the block sizes change depending on the screen width. However, there is a difference.
Responsive design doesn't just stretch or shrink in width, it adapts to the screen size, sometimes completely changing the style of the blocks.
The simplest example: the content area is stretched across the entire width of the screen, and the sidebar is either moved down or completely disappears from the page. Or the menu turns from a regular horizontal one into a drop-down list.
Depending on your budget and knowledge of CSS/HTML, there may be several options.
Order adaptive layout from a freelancerThe most correct option, in my opinion, is also the most unpopular. Because pleasure is not cheap. And yet, if funds allow, and there is no desire to understand the intricacies of layout, it is better to find a studio or freelancer who will adapt your template for mobile devices or make a new one. And you already know how to check its operation on devices with different resolutions - responsinator.com can help.
Find ready-made designIN Lately Almost all designers try to adapt their templates for mobile devices. You can look for a ready-made design, for example, here:
- www.templatemonster.com is one of the most popular collections of paid templates for different CMS and just HTML sites.
- www.templatemo.com - many free options modern design.
This option is suitable for those who are not chasing an exclusive design or are able to make their own changes to the code to make the template unique.
Use frameworksFramework - one might say, the framework of the template, its main files and a grid of blocks. Designers love them for their ease of use and time savings, because a ready-made “fish” template allows you not to waste time on routine. If you know how to work with frameworks, using them to create responsive design is a great solution.
You will find a huge list of adaptive frameworks for every taste on Habré. But most of them are quite difficult to use and heavy in volume. Therefore, for those who love minimalism, I recommend another list of lightweight adaptive frameworks from Beloweb.ru. At the same time, take a closer look at the blog, there are a lot of useful “goodies” for designers and layout designers.
Make the layout yourselfThis method is for those who are not looking for easy ways and want to figure everything out on their own. Essentially, to make your template responsive, you need to use two things:
Viewport meta tag
Which determines the type of device from which the visitor accessed the site and sets the correct screen width. Just copy this code into the head of your site.
@media rule
Thanks to which we can write different styles for the same blocks in your css file. It looks something like this:
#left( width: 600px; float: left; margin-right: 10px; ) #right( width: 400px; float: right; ) @media only screen and (max-width: 1010px)( #left, #right( width : 98%; float: none; margin: 10px auto; ) )
In this example, the #left block is 600 pixels wide and will be positioned to the left of the 400 px wide #right block. But if the monitor resolution is less than 1010 pixels, we remove the wrapping from both blocks and stretch them to 98% of the screen width.
And this is how you need to write rules for the following screen sizes:
- 320px for iPhone 3-5 in vertical position
- 480px for iPhone 3-4 in horizontal position
- 568px for iPhone 5 horizontally
- 384px for smartphone in vertical position
- 600px for smartphone in horizontal position
- 768px for iPad horizontally
- 1024px for iPad in vertical position
A complete list of resolutions can be found on responsinator.com or in the Yandex.Metrica report for your site (section Technologies/Display Resolutions). In a word, it will not be difficult for those who are familiar with website layout to understand this issue.
You know, I rarely give links to paid courses (because I never recommend something that I have never used myself), but this is truly the best training material on layout that I have ever watched. It is thanks to Mikhail that my blog template is now not only adapted to different resolutions screen, it has become lighter than the previous version and is better optimized for search engines.
By the way, if you are reading the article from a mobile phone, write if everything is in place, is everything convenient? That's all for today. If you have any questions or additions, welcome to the comments; as always, they are open to everyone.
From the author: Responsive website design is a completely new approach to design that is gaining more and more attention, but considering how much it differs from traditional methods development, at first it may seem prohibitively difficult for novice web designers and developers. In this article I'm going to cover some the most important points related to the development and implementation of responsive web design and make your life, friends, a little easier.
The classic approach to creating a website looks something like this: a development block, a web design block, a layout block, etc. However, in the last few years, everything has begun to change dramatically: the term “web design” is gradually fading away, while while “adaptive design” insidiously strengthens its position, gradually making shifts in the consciousness of specialists.
By and large, web design should not be perceived so unambiguously, but rapid development adaptive design, which is considered almost an industrial standard, has entailed a whole carousel of various tools and platforms.
Concept of adaptability“What is responsive design and what does it adapt to?” - an ignorant person may ask. I will answer you: to the type of device used. Responsive design ensures a good web page experience on various gadgets connected to the Internet.
The same website should look great on laptops, smartphones, tablets, etc., regardless of the screen format and resolution used. At the same time, it should be equally convenient for users to view web pages for all formats, without the need, for example, to expand individual blocks so as not to miss the desired button.
Due to the fact that each adaptive project is individual and iterative, it is quite difficult to analyze all its processes in order to provide solutions for all situations and improve work efficiency. However, there are general successful strategies and techniques for implementing, improving and creating responsive website design that can be applied in almost any situation.
Mobile First StrategyThis strategy development was proposed back in 2009 by Luke Wroblewski, author of books and articles on web design, director social network Bagcheck, which was acquired by Twitter Inc. just 9 months after its creation.
Luke Wroblewski's approach to development is called "Mobile First" for three reasons:
the mobile environment allows you to focus and get rid of the clutter that occurs due to “cluttering” a large amount of space on the screen;
The mobile market tends to develop at a breakneck pace;
The mobile environment is associated with many possibilities (camera, multi-touch gestures, GPS, accelerometer, geolocation).
Since then, web design has steadily shifted towards this approach. Many web designers and web developers first think about how to make a responsive design for the mobile version of the site, and then they engage in desktop development.
The "Mobile First" strategy starts by creating the structure and content of a mobile version that works in low-speed Internet environments, and moving towards major breakpoints with higher speeds. fast connection, while improving and optimizing the simplified versions.
Modern trends and approaches in web development
Learn the algorithm for rapid growth from scratch in website building
This ensures innovative and efficient operation of all types of devices. Website developers focus on the needs of users, create optimized and high-speed pages, pay attention to important content. By the way, even Google uses the “Mobile First” approach.
Content strategy “Content out”The goal of creating responsive design is to provide the best usability in any context. This is an excellent opportunity to analyze content and make it easily accessible and readable on all types of devices.
Many who do not use a Mobile First strategy prefer a Content First strategy. This is, of course, the right thing to do, however, you should not take this call literally and think that you should not start developing a design until all the content is ready.
Content should be continuously created and discussed both at the stage of creating a responsive website design and after its completion! As renowned designer Cennydd Bowles said, “design and content should go hand in hand.” They must complement each other.
The “Content structure first” strategy is a completely different matter. First of all, you need to be clear about the site's mission, what it is trying to tell the world. And only then carefully consider the structure of its content, methods of creation, types and purpose of each element, while the user should be put at the forefront.
You must have a strategy in place that will ensure that you provide each user with the necessary content at every stage of their journey on your resource. The site structure should be based on research into your behavior and needs. target audience.
If you structure your content well in the initial stages of website development, you can easily transfer it to other platforms and devices in the future. Of course, it wouldn’t hurt to have an example of responsive design as a reference for you.
Take the time to sketch and prototypeDeciding on what resolutions to make responsive design for should start with creating an organized layout - sketching, which will be easy to scale in the future.
The variety of devices with their capabilities, resolutions and screen sizes means a large number of layouts. Creating a sketch will lay the foundation for a future prototype of the project. With its help, you can bring up various ideas for discussion, make rough sketches that will form the basis of the site’s framework.
Once the sketch is ready, you can move on to creating a working draft version of the site or HTML template. This process is called prototyping, and it involves minimal visual design, in order to improve interaction and functionality.
This strategy will help you rethink your entire approach to creating responsive design. Instead of developing “mobile sites” and “web sites,” you will now focus on developing flexible systems with a set of rules that determine how content is delivered and delivered based on context.
I hope this article was useful to both experienced and novice web designers.
And finally, the traditional parting words: make the site useful, convenient and familiar, regardless of the device on which it is viewed. See you again, friends!
P.S.: have you already subscribed to our blog updates?
Modern trends and approaches in web development
Learn the algorithm for rapid growth from scratch in website building
Adaptive layout changes page design depending on user behavior, platform, screen size and device orientation and is an integral part of modern web development. It allows you to save significantly and not have to draw a new design for each resolution, but change the size and location of individual elements.
This article will look at the main elements of the site and how to adapt them.
Adjusting screen resolutionIn principle, you can divide devices into different categories and design for each of them separately, but this will take too much time, and who knows what standards will be in five years? Moreover, according to statistics, we have a whole range of different resolutions:
It becomes obvious that we will not be able to continue to design for each device separately. But what to do then?
Partial solution: make everything flexibleOf course it's not perfect way, but it fixes most of the problems.
Ethan Marcotte created a simple template demonstrating the use of responsive layout:
At first glance it may seem that everything is easy, but it is not. Take a look at the logo:
If you reduce the entire image, the inscriptions will become unreadable. Therefore, in order to save the logo, the picture is divided into two parts: the first part (illustration) is used as a background, the second (logo) changes its size proportionally.
The h1 element contains an image as the background, and the image is aligned to the background of the container (header).
Flexible imagesWorking with images is one of the most important problems when working with responsive design. There are many ways to resize images, and most of them are quite simple to implement. One solution is to use max-width in CSS:
Img (max-width: 100%;)
The maximum width of an image is 100% of the width of the screen or browser window, so the smaller the width, the smaller the image. Note that max-width is not supported in IE, so use width: 100% .
The presented method is a good option for creating adaptive images, but by changing only the size, we will leave the weight of the image the same, which will increase the loading time on mobile devices.
Another way: responsive imagesThe technique, introduced by Filament Group, not only resizes images, but also compresses the resolution of images on small screens to speed up loading.
This technique requires several files available on Github. First we take the JavaScript file ( rwd-images.js), file .htaccess And rwd.gif(image file). Then we use some HTML to associate large and small resolutions: first a small image with a prefix .r(to show that the image should be responsive), then a link to large image using data-fullsrc:
For any screen wider than 480 px, the image will load from high resolution (largeRes.jpg), and on small screens it will load ( smallRes.jpg).
On iPhone and iPod touch there is a feature: a design created for large screens will simply shrink in a browser with a small resolution without scrolling or additional mobile layout. However, images and text will not be visible:
To solve this problem, use meta tag:
If initial-scale is equal to one, the width of the images becomes equal to the width of the screen.
Customizable page layout structureFor significant changes in page size, you may need to change the overall arrangement of elements. It is convenient to do this via separate file with styles or, more efficiently, via a CSS media query. There shouldn't be any problems as most of the styles will remain the same and only a few will change.
For example, you have main file with styles that define #wrapper , #content , #sidebar , #nav along with colors, background and fonts. If your master styles make your layout too narrow, short, wide, or tall, you can identify this and include new styles.
style.css (main):
/* Basic styles that will be inherited by the child style sheet */ html,body( background... font... color... ) h1,h2,h3() p, blockquote, pre, code, ol, ul() /* Structural elements */ #wrapper( width: 80%; margin: 0 auto; background: #fff; padding: 20px; ) #content( width: 54%; float: left; margin-right: 3%; ) # sidebar-left( width: 20%; float: left; margin-right: 3%; ) #sidebar-right( width: 20%; float: left; )
mobile.css (child):
#wrapper( width: 90%; ) #content( width: 100%; ) #sidebar-left( width: 100%; clear: both; /* Additional styles for the new design */ border-top: 1px solid #ccc; margin-top: 20px; ) #sidebar-right( width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px; )
On a wide screen left and right side panels fits well on the side. On narrower screens, these blocks are located one below the other for greater convenience.
CSS3 media queriesLet's look at how you can use CSS3 media queries to create responsive designs. min-width specifies the minimum width of the browser window or screen to which certain styles will be applied. If any value is below min-width , the styles will be ignored. max-width does the opposite.
@media screen and (min-width: 600px) ( .hereIsMyClass ( width: 30%; float: right; ) )
The media query will only work when the min-width is greater than or equal to 600 px.
@media screen and (max-width: 600px) ( .aClassforSmallScreens ( clear: both; font-size: 1.3em; ) )
In this case the class ( aClassforSmallscreens) will work when the screen width is less than or equal to 600 px.
While min-width and max-width can apply to both screen width and browser window width, we may only need to work with device width. For example, to ignore browsers opened in a small window. You can use min-device-width and max-device-width for this:
@media screen and (max-device-width: 480px) ( .classForiPhoneDisplay ( font-size: 1.2em; ) ) @media screen and (min-device-width: 768px) ( .minimumiPadWidth ( clear: both; margin-bottom : 2px solid #ccc; ) )
Especially for iPad, media queries have the property orientation, whose values can be either landscape(horizontal), or portrait(vertical):
@media screen and (orientation: landscape) ( .iPadLandscape ( width: 30%; float: right; ) ) @media screen and (orientation: portrait) ( .iPadPortrait ( clear: both; ) )
You can also combine media query values:
@media screen and (min-width: 800px) and (max-width: 1200px) ( .classForaMediumScreen ( background: #cc0000; width: 30%; float: right; ) )
This code will only be executed for screens or browser windows between 800 and 1200 px wide.
Load a specific stylesheet for different meanings media queries can be done like this:
JavaScript
If your browser does not support CSS3 media queries, then replacing styles can be done with using jQuery:
$(document).ready(function())( $(window).bind("resize", resizeWindow); function resizeWindow(e)( var newWindowWidth = $(window).width(); // If the width is less than 600 px , mobile stylesheet is used if(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // If the width is greater than 600 px, the desktop stylesheet is used $("link").attr((href: "style.css")); ) ) ));
Optional content displayThe ability to shrink and rearrange elements to fit on small screens is great. But it is not the best option. Mobile devices typically feature a broader set of changes: simplified navigation, more focused content, lists or rows instead of columns.
Here's our markup:
Main Content A Left Sidebar A Right Sidebar
style.css (main):
#content( width: 54%; float: left; margin-right: 3%; ) #sidebar-left( width: 20%; float: left; margin-right: 3%; ) #sidebar-right( width: 20 %; float: left; ) .sidebar-nav( display: none; )
mobile.css (simplified):
#content( width: 100%; ) #sidebar-left( display: none; ) #sidebar-right( display: none; ) .sidebar-nav( display: inline; )
If the screen size is reduced, you can, for example, use a script or alternative file with styles to enlarge white space or replace navigation for greater convenience. Thus, having the ability to hide and show elements, change the size of pictures, elements and much more, you can adapt the design to any device and screen.