<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib1e" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="Media-Queries.css"> <title>Document</title> </head> <body> <div class="Div" > <div class="FDiv"></div> <div class="SDiv"></div> </div> </body> </html> file style.css .Div{ margin-top: 200px; display: flex; justify-content: center; background-color: #999; } .FDiv{ width: 200px; height: 200px; background-color: chartreuse; } .SDiv{ width: 200px; height: 200px; background-color:yellow; margin-left: 200px; } Media-Queries.css <!-- حتما فاصله بین لغت ها و پرانتز و لغت ها حفظ شود--> @media only screen and (max-width:600px){ .FDiv{ width: 250px; height: 250px; background-color: yellow; .SDiv{ width: 250px; height: 250px; background-color: red; margin-left: 200px; } } @media only screen and (min-width:600px){ .FDiv{ width: 250px; height: 250px; background-color: blue; .SDiv{ width: 250px; height: 250px; background-color: red; margin-left: 200px; } } @media only screen and (min-width:800px){ .FDiv{ width: 250px; height: 250px; background-color: yellow; position: relative; top:100px; .SDiv{ width: 250px; height: 250px; background-color: purpul; margin-left: 200px; position: relative; top:100px; } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter