Responsive Design
Responsive web design makes your web page look good on all divices, it means it adjust the webpages for the sizes. Mobile phone has different size, destop has different size like that.It only uses HTML and CSS.
Viewport
The viewport is the user's visible area of a web page.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
We use rm and rem instead of pixels. rm means relative measurement, in the name also we konw that it adjust the size. While we rm measurement it auto adjust the size of webpage.
We have some key words like min-width, min-height,max-height,max-width and somemore. When we use min-width or min-height, we give a minimun size to the webside and other than this it cannot to be resize.
Em
Incorporating relative sizing starts by using units other than pixels. One unit of measurement you can use in CSS to create relatively-sized content is the em, written as
.h1 { font-size: 50em; }
Rem
Rem stands for root em. It acts similar to em, but instead of checking parent elements to size font, it checks the root element. The root element is the <html> tag.
h1 { font-size: 2rem; }
CSS uses media queries to adapt a website's content to different screen sizes. With media queries, CSS can detect the size of the current screen and apply different CSS styles depending on the width of the screen.
Em
Incorporating relative sizing starts by using units other than pixels. One unit of measurement you can use in CSS to create relatively-sized content is the em, written as
em in CSS..h1 { font-size: 50em; }
Rem
Rem stands for root em. It acts similar to em, but instead of checking parent elements to size font, it checks the root element. The root element is the <html> tag.
h1 { font-size: 2rem; }
Media Queries
CSS uses media queries to adapt a website's content to different screen sizes. With media queries, CSS can detect the size of the current screen and apply different CSS styles depending on the width of the screen.

1. @media
2. only screen
3.and (max-width : 480px and min-height: 200px)
1. @media
2. only screen
3.and (max-width : 480px and min-height: 200px)
No comments:
Post a Comment