Using The width Property
If the width property is set to a percentage and the height property is set to “auto”, the image will be responsive and scale up and down:
Example
img {
width: 100%;
height: auto;
}
Tag: css responsive images
Responsive Web Design – Media Queries
What is a Media Query?
Media query is a CSS technique introduced in CSS3.
It uses the @media rule to include a block of CSS properties only if a certain condition is true.
Example
If the browser window is 600px or smaller, the background color will be lightblue:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Responsive Web Design
What is Responsive Web Design?
Responsive web design makes your web page look good on all devices.
Responsive web design uses only HTML and CSS.
Responsive web design is not a program or a JavaScript.
Designing For The Best Experience For All Users
Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device.
Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device: Continue reading Responsive Web Design