How do I change css for to work best on a mobile phone?
How do I change css for to work best on a mobile phone?
A new feature is added into CSS3 “Media queries” which enables a web-developer to create a website that can be accessed in different devices having different screen resolutions.
Media queries focus on device capability rather than the type of device.
It mainly focuses on the following terms: -
- Height of the device
- Width of the device
- Height of the viewport (browser)
- Width of the viewport (browser)
- Screen resolution
- Orientation (for tablets and mobile phones; landscape or portrait)
By using this technique, a website can be made compatible with mobile devices.
To understand it better let’s take a small example to change the color of the website when the resolution of the screen is changed.
Code: -
<!html section- begin>
<html>
<!head section- begin>
<head>
<!style section-begin>
<style>
/*body section*/
body
{
background-color: red;
color: black;
}
/* setting the background color as tan when the size of the screen is 900px or less */
@media screen and (max-width: 900px)
{
/*body section*/
body
{
background-color: tan;
color: white;
}
}
/*style section- end*/
</style>
<!head section- end>
</head>
<!body sectin- begin>
<body>
<!heading>
<h1>Please change the size of the screen to see the effects</h1>
<!paragraph section>
<p>The background color is "red" by default, if the size of the screen size is 900px or less, the background color will change to "tan".</p>
<!body section - end>
</body>
<!html section- end>
</html>
Step by step
Solved in 4 steps with 2 images
