change screen width to display different layouts (change happens at 503/504px width)
<html>
<head>
<title>main html</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./mycss.css" media="all" rel="stylesheet" type="text/css"></link>
<style>
@media screen and (max-width:503px){
#big_screen{
display:none;
}
#footer_display::after{
content:"for small screen display";
}
}
@media screen and (min-width:504px){
#small_screen{
display:none;
}
#footer_display::after{
content:"for big screen display";
}
}
</style>
</head>
<body>
<div id="big_screen">
<img alt="canada big" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglHqkiW02tCQKhMjPkB7KRJsjHNQZTUYAs55TiwdvUVlv_ToFydA6bW3AmDCith_5vF87sIAf6BDKhYu-ppNchOY0dEUDIsFEsKXeFUviGdusH1RdwVFslAC_q1KufbbIgQn7X2GcpjE4/s320/canada.png" />
</div>
<div id="small_screen">
<img alt="canada small" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB_iBcxTKckmZMIZwYR3PIKIrQYZ0M8e5YiSxzD1q8cCdvE8cBUjSRqk0f0uw7_f6t7sSS1ysZTNUuG5xvRSOC09pntMRJiELpmtCBeEbzZD7vHi8L-A14Secujxha72_eWHjBAiKpG5I/s1600/canada+1.png" />
</div>
<div id="footer_display">
</div>
</body>
</html>
No comments:
Post a Comment