Welcome Guest! (App Version 3.1)
Basic CSSWhat is CSS? My First Program Height & Width Background & Color Box Model Text Formatting Comments Display Position z-index Opacity Float & Clear:both Image Sprites
CSS SelectorsSelectors In CSS Basic Selectors Relational Selectors Attribute Based Selectors Child & Nth-type Selectors Pseudo Classes Selectors Pseudo Elements Selectors Negation Selector
Multi-Device SupportMDS Methods Responsive Web Design By Media Query By Fluid Web Design By UI Framework Adaptive Web Design Separate Domain & Content MDS Approaches Mobile First Approach Desktop First Approach MDS Design Process Progressive Enhancement Graceful Degradation
CSS 3Border-radius Box-Shadow Text-Shadow Multiple Column Background Images Border Image Custom Web Fonts New Color Formats Flex Box Gradients Linear Gradients Radial Gradients Transformation 2D-Transformation 3D-Transformation
CSS QuizCSS Quiz 1
This is the first approach for Multi-Device Support to be done by a website. This is the most famous one and already has a number of pre-build UI Frameworks which will do the job for you without much hassle.
Look at a scenario where a vendor wants his website to render on various mobile devices, tablets, laptops, and even widescreens. One method to do that will be make different websites and try find the screen width or device type and then redirect to a separate domain link (Our 3rd approach). This would require a lot of extra coding being done for each of those links and respective codebase.
Responsive Designing advocates use of Media Query and smart classes to get this thing done easily. What is required is that let the content be same but depending on various screen size change the CSS so smartly as to hide/show, change height/width, font-size, color, background and multiple other properties so that now the very same content when viewed from desktop to mobile looks like user is visiting some other website while in reality only some CSS has changed (RWD might also include JS changes based on device).
So basically we can say that you may either use a lot of Media Queries yourself to adjust look and feel of your content based on device properties (like screen-size, portrait, landscape, etc.) or use any pre-build and easily available Responsive UI Framework (like Bootstrap, Foundation, Semantic UI, etc.).