Responsive Web Design | 6 Effective Tips - CSS Tutorial 102
Notes for You:: Responsive Web Design | 6 Effective Tips - CSS Tutorial 102
6 Effective Tips on How to Make a Website Responsive.
- designing web pages which are displayed properly in all devices of different screen sizes.
Point 1: Make web pages mobile friendly
- add to head section: <meta name="viewport" content="width=device-width, initial-scale=1.0">
Point 2: Normalize web pages
- <link href="css/normalize.css" rel="stylesheet" type="text/css"/>
*{margin:0px; padding:0px; font-family: arial; box-sizing:border-box; etc.}
Point 3: Use media queries
- media queries detect screen size and execute respective code
- use 5 media queries targeting 5 different screen sizes
/* Extra small screen devices (phones, 600px and down) */
@media screen and (max-width: 600px) {...}
OR
<link href="xs.css" rel="stylesheet" type="text/css" media="screen and (max-width:600px)"/>
/* Small screen devices (large phones and portrait tablets, 600px and up) */
@media screen and (min-width: 600px) and (max-width:768px) {...}
OR
<link href="sm.css" rel="stylesheet" type="text/css" media="screen and (min-width:600px) and (max-width:767px)"/>
/* Medium screen devices (landscape tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width:992px) {...}
OR
<link href="md.css" rel="stylesheet" type="text/css" media="screen and (min-width:768px) and (max-width:992px)"/>
/* Large screen devices (laptops/desktops, 992px and up) */
@media screen and (min-width: 992px) and (max-width:1200px) {...}
OR
<link href="lg.css" rel="stylesheet" type="text/css" media="screen and (min-width:993px) and (max-width:1200px)"/>
/* Extra large screen devices (large laptops and desktops, 1200px and up) */
@media screen and (min-width: 1200px) {...}
OR
<link href="xl.css" rel="stylesheet" type="text/css" media="screen and (min-width:1200px)"/>
Note: most commonly designers use 3 css files:
<link href="css/mobile.css" type="text/css" rel="stylesheet" media="screen and (max-width:600px)"/>
<link href="css/tablet.css" type="text/css" rel="stylesheet" media="screen and (min-width:600px) and (max-width:992px)"/>
<link href="css/desktop.css" type="text/css" rel="stylesheet" media="screen and (min-width:992px)"/>
Point 4:
- Set width of HTML elements in %
- use width property
Point 5:
- Set height of HTML elements in px
- use min-height property
Point 6:
- Set font size of HTML elements in vw unit
Note:
- replace < with less-than symbol.
- replace > with greater-than symbol.
=========================================
Follow the link for previous video:
CSS Flexbox Properties Part 2 | CSS Flex Item Properties - CSS Tutorials 101
• CSS Layouts: CSS Flexbox Properties P...
=========================================
CSS Tutorials Playlist:-
• CSS Tutorials
=========================================
Watch My Other Useful Tutorials:-
HTML Tutorials Playlist:-
• HTML Tutorials
JavaScript Tutorials Playlist:-
• JavaScript Tutorials
jQuery Tutorials Playlist:-
• jQuery Tutorials
=========================================
► Subscribe to our YouTube channel:
/ chidrestechtutorials
► Visit our Website:
https://www.chidrestechtutorials.com
=========================================
Hash Tags:-
#ChidresTechTutorials #CSS #CSSTutorial
Auf dieser Seite können Sie das Online-Video Responsive Web Design | 6 Effective Tips - CSS Tutorial 102 mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer ChidresTechTutorials 10 Mai 2023 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 1,040 Mal angesehen und es wurde von 57 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
