INTERACTIVE COMMUNICATIONS: Responsive Web Design & Media QueriesA

Responsive web design plays a key role in today web development, because today’s websites are not only viewed on desktops and laptops they are also used on different devices and platforms such as mobile and tablets. Using responsive web is the approach that allows the web developer to define the size depending on the users device. As a user switches devices, the website should automatically switch container sizes, image sizes, font sizes, and resolution so the website can now fit on that certain device and still look good.

Media Queries
This is the technique using a CSS style sheet, that allows the web developer to define the changes in the CSS of a website, depending on the size of screen the website is being used on. A Media Querie allows the developer to set the screen sizes that when the website is shrunk down to on a different device, changes the style sheet. Below is an example of the code, where I tested it to create a greater understanding of how it works.

Basically I changed the colours for each screen size, so it can show changes each time the website is used on a different sized device. Below is a screenshot of the site on a desktop, and bellow this screenshot is one of the site resized down to “768px” along side the code with the Media Queire.

day1    Here is the screenshot of the site at “768px” this is what the site would look like on a tablet device, as you can see now it has been used on a smaller screen the media queries has changed the color of the body and re sized the title at the top along with the images.day2

Here is the code, at the top is the Media Querie, once set you put in brackets next to the querie the set “max-width” in this case it is “768px” so once the screen size has surpassed this max-width that’s when the styling you have placed under the media querie take action, and change the colors and sizes of the content on the website.
media1

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s