Responsive UI using CSS Media Query - PowerPoint PPT Presentation

About This Presentation
Title:

Responsive UI using CSS Media Query

Description:

Responsive UI using CSS Media Query – PowerPoint PPT presentation

Number of Views:752
Slides: 5
Provided by: neevtech
Category:

less

Transcript and Presenter's Notes

Title: Responsive UI using CSS Media Query


1
Responsive UI Using CSS Media Query
2
What is Responsive Design? How is it implemented?
  • A Website or User Interface is said to be
    responsive when it is able to change its layout
    depending on what device it is being viewed on.
  • The logical approach is to first identify the
    device or screen width and based on that re
    position or even remove certain blocks of content
     so that its is optimized for viewing.
  • While there are various techniques to detect the
    screen resolution and re-arrange the content
    blocks, the easiest and most commonly used
    technique is by taking advantage of one of CSS3
    s new feature called Media Query.

3
What is CSS Media Query? How is it used to
implement Responsive Design?
CSS Media Query is where you can define a set of
CSS rules which would apply when the media query
condition is satisfied. navbackground
333border-radius8pxpadding 3 px
5pxmin-height35px _at_media screen and
(min-width 480px) navwidth150pxfloatleft
margin15px 0 In the code sample above youll
notice the media query which states that if the
screen width is 480px and above it would apply
the CSS which would float the navbar and change
the UI from a 1 column layout to a 2 column
layout. You can view the demo code here.
4
sales_at_neevtech.com
Neev Information Technologies Pvt. Ltd.
Sweden
Singapore
India - Bangalore
USA
India - Pune
Neev AB, Birger Jarlsgatan 53, 6tr, 11145,
Stockholm Phone 46723250723
13 LSquare, 3rd Floor Parihar Chowk,
Aundh, Pune 411007. Phone 91-64103338
The Estate, 121,6th Floor, Dickenson
Road Bangalore-560042 Phone 91 80 25594416
08-03 SGX Centre 2, 4 Shenton Way, Singapore
068807 Phone 65 6435 1961
1121 Boyce Rd Ste 1400,Pittsburgh PA 15241 Phone
1 888-979-7860
Write a Comment
User Comments (0)
About PowerShow.com