KB Article 10195
2013/05/14

Close
X
Contact Tech Support

 Email Tech Support
 (250) 655-1766
 [7:30 - 5:00 PST]
Your Meeting ID will be Provided by a Rep.
Tech Support
Tech Support Home
Software Updates
Knowledge Base Search
Recent KB Articles
Product FAQs
Code Samples
Documentation
Tech Blog
System Requirements
Installation Instructions
Support Testimonials
Contact us to...
Create a Ticket
Request a Free Demo
Suggest a New Feature
Submit Feedback
Upload a Large File
Other Services
Software Training
Professional Services

Styling your site for different devices and screen resolutions

Product: WebSmart ILE Type: Frequently Asked Question

Designing websites for different screen sizes and resolutions is challenging, because of the sheer number of screen sizes and resolutions that you need to consider. Two popular ways to manage this is through the use of the EM unit and the CSS media query.

To help normalize the two variables, the EM unit became the popular go-to unit of measurement. The EM unit is a relative measurement using the default character sizing. This allows us to scale the website with respect to what the user will actually see, instead of the browser's or screen's settings. You can read more about it over at its Wikipedia page.

The second component is the media query. Media query is a CSS syntax for creating conditions for loading certain styles. This allows you to create different styles for different devices on the same page.

There are 2 conventional ways to break up your styling. You can specify the media queries at the file level, which results in specific CSS files being downloaded.

<link rel="stylesheet" href="/websmart/wsdemo/wsmobile/demo.css" media="" />

Or, you can specify the condition inside the CSS code so that only certain portions within the same file are executed.

@media screen and (max-width: 20em) {
	body {
		margin: 	auto;
		max-width: 	12em
	}	
} 

A general guideline to decide which one to use is to follow the idea of major and minor break points for different devices. You would use the media query at file level to separate between device type such as phones, tablets, or screens. This is refered to as a major break point. This will reduce the amount of CSS to load, since the device doesn't change.

However, each type of device can have different screen sizes, and the screen sizes may change as the users rotate their device. This is refered to as minor breakpoints. You would specify the additional media queries inside the CSS files for different screen resolutions that may fall within this type of device.

Over at css-tricks.com, you can find more explainations and examples about media queries.

For more information on why you should use EMs and media queries, check out the Cloud Four blog post.

Rate This Article

Did this example help you to achieve your goal?
 Yes  No  Don't Know

Enter additional comments below.   If you want to hear back from us, include your contact information.

Email Address:
Comments:
Please enable JavaScript in order to rate this page.