Media queries allow us to apply different CSS rules based on environment variables.
They can be though of as if statements in CSS.
@media screen{
body {
color: red;
}
}
@media print{
body {
color: black;
}
}
@media screen and (min-width:320px) and (max-width:600px){
/*rules apply to screen widths 320px to 600px;*/
p{
color:red;
}
div{
float:right;
}
}
@media screen and (max-width:320px){
/*rules apply to screen widths below 320px*/
}
There are two primary ways to handle responsive layouts.
Initial popular way to handle responsive.
/* Global Default Style */
body{
font-size:16px;
}
@media screen and (max-width:960px) {
/* Large Screen Style */
body{
font-size:14px;
}
}
@media screen and (max-width:620px) {
/* Medium Screen Style */
body{
font-size:12px;
}
}
@media screen and (max-width:480px) {
/* Small Screen Style */
body{
font-size:10px;
}
}
Takes the simplistic approach of targeting the smallest screens first.
/* Global Default Style */
body{
font-size:16px;
}
@media screen and (min-width:480px) {
/* Small Screen Style */
body{
font-size:14px;
}
}
@media screen and (min-width:620px) {
/* Medium Screen Style */
body{
font-size:12px;
}
}
@media screen and (min-width:960px) {
/* Large Screen Style */
body{
font-size:10px;
}
} You don't have to settle with the default fonts that are on your machine for web pages. Adding a custom font to your website is very easy process to do.
Find a font you have permission to use your website and include the files in your project.
@font-face {
font-family: my-font-name;
src: url(path/to/font.eof),
url(path/to/font.woff),
url(path/to/font.woff2)
}
font-family in your CSS
.css{
/*Make sure you include a fallback */
font-family:my-font-name, Arial, sans-serif;
}
There is always a cost doing something fancy on the web. Custom fonts are the same way.
These are some alternatives to using a self hosted font type. These are traditionally more optimized for the web world.
.my-div{
font-family: 'Roboto', sans-serif;
}
Icon Font Libraries are an incredible way to speed up your development time and spend less time cutting out small images.
It takes a set of Scalable Vector Graphic icons and compresses them into a font file for you to use.