Online Training
Q4 2024
Nov 19 to Dec 10
11.00 AM EST: USA, UK, Canada, Mexico and Europe
06.00 AM GMT: MiddleEast, Asia and Australia
Media queries in CSS help your website look good on different devices by applying specific styles based on the device’s characteristics, like its screen size. You use media queries to ensure your site adjusts properly for smartphones, tablets, and desktops.
/* Apply styles for screens that are at least 600px wide */
@media only screen and (min-width: 600px) {
.container {
width: 80%;
}
}
You can combine multiple conditions in media queries to target specific devices more precisely. For example, you might want to apply styles only to devices that have both a certain screen width and high resolution.
/* Apply styles for screens smaller than 480px wide with high resolution */
@media only screen and (max-width: 480px) and (min-resolution: 300dpi) {
.small-screen {
font-size: 14px;
}
}
CSS media queries let you apply different styles to your website based on the screen size or other features of the device. For instance, you can have different styles for mobile phones and laptops to make sure your site looks good on any device.
/* For mobile devices with a screen width of 480px or less */
@media only screen and (max-width: 480px) {
body {
font-size: 12px;
}
.photo {
width: 100%;
}
}
Media features are conditions you can use in media queries to apply styles based on specific device characteristics, such as width or resolution. This allows you to create tailored designs that fit different screen sizes and types.
/* Apply styles for screens between 480px and 600px wide */
@media only screen and (min-width: 480px) and (max-width: 600px) {
.container {
margin: 0 auto;
width: 90%;
}
}
You can define a range of screen sizes in media queries to apply styles within that range. This helps make your website responsive by ensuring it looks good across various screen sizes.
/* Apply styles for screens between 600px and 800px wide */
@media only screen and (min-width: 600px) and (max-width: 800px) {
.nav-container {
font-size: 14px;
}
}
The 'em' unit in CSS is relative to the font size of the element it is used in. For instance, if a parent element has a font size of 16px, 1em inside that element will equal 16px.
/* Set element size based on parent font size */
.news-row {
height: 20em; /* 20 times the font size of the parent element */
width: 25em;
}
Percentages in CSS allow elements to scale relative to their parent’s size. This helps in creating layouts that adapt smoothly to different screen sizes.
/* Set font size relative to the root element's font size */
html {
font-size: 16px;
}
span {
font-size: 1.5em; /* 1.5 times the font size of the parent */
}
'background-size: cover;' makes a background image cover the entire container while keeping its aspect ratio. The image will scale to ensure the container is fully covered, though parts of the image might be cropped.
/* Make background image cover the entire container */
.container {
background-image: url('background.jpg');
background-size: cover;
background-position: center;
}
'rem' stands for 'root em', and it is a unit in CSS relative to the font size of the root element (typically the <html> element). This makes it easier to maintain consistent sizing throughout a website.
/* Set font size based on root element's font size */
html {
font-size: 16px;
}
body {
font-size: 1rem; /* 16px */
}
.heading {
font-size: 2rem; /* 32px */
}
Favourites
Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.
Sign up now
Welcome to our comprehensive collection of programming language cheatsheets! Whether you're a seasoned developer or a beginner, these quick reference guides provide essential tips and key information for all major languages. They focus on core concepts, commands, and functions—designed to enhance your efficiency and productivity.
ManageEngine Site24x7, a leading IT monitoring and observability platform, is committed to equipping developers and IT professionals with the tools and insights needed to excel in their fields.
Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.
Sign up now!
Java
HTML and CSS 
Python
Javascript
Troubleshooting
Blogs
Learn
Tools