آموزش Media Query در css
آموزش Media Query در css (پروژه محور) بصورت کامل همراه با مثال و توضیح. در این آموزش به معرفی CSS3 Media Queries ، سینتکس ، نحوه استفاده از Media Query و چندین مثال خواهیم پرداخت.
معرفی CSS3 Media Queries
در این بخش از آموزش css از تاپ سایت 98 به معرفی CSS3 Media Queries خواهیم پرداخت.
امروزه دستگاه های مختلفی با سایزها و رزولوشن های مختلف وجود دارند که افراد وبسایت ها را از طریق آنها مشاهده می کنند.
وب سایت ها امروزه باید ریسپانسیو یا واکنشگرا باشند.
ریسپانسیو ( واکنشگرا ) یعنی اسکرول افقی نداشته باشند و مثلا در موبایل با بالا و پایین بردن ، بتوانیم قسمت های مختلف صفحه وب را مشاهده کنیم.
با استفاده از Media Query که در css3 معرفی شده است می توانیم برای دستگاه های مختلف قالب های مختلفی طراحی کنیم.
مثلا منوها در لپ تاپ بصورت افقی نمایش داده شود و در گوشی موبایل بصورت عمودی نمایش داده شود.
Media Query می تواند موارد مختلف را چک کند از جمله : عرض و ارتفاع نمایشگر (viewport) ، عرض و ارتفاع دستگاه (device) ، رزولوشن یا وضوح (resolution) ، اینکه دستگاه های موبایل و تبلت بصورت افقی یا عمودی می باشد.
با استفاده از Media Query می توانیم برای دستگاه های مختلف مانند لپ تاپ ، تبلت ، موبایل و غیره استایل (style) مناسب بنویسیم.
سینتکس Media Query
در بخش زیر سینتکس Media Query را می بینید.
با ذکر چندین مثال روش استفاده از آن را توضیح خواهیم داد.
CSS-Code;
}
انواع دستگاه ها
در این بخش انواع دستگاه ها یا CSS3 Media Types را بررسی می کنیم.
اگر نوع all را انتخاب کنیم برای همه دستگاه ها استفاده می شود.
اگر نوع print را انتخاب کنیم برای چاپگرها استفاده می شود.
اگر نوع screen را انتخاب کنیم مورد استفاده برای صفحه نمایش کامپیوتر، تبلت ، تلفن های هوشمند و غیره
نحوه استفاده از Media Query
در بخش زیر نحوه استفاده از Media Query را بررسی می کنیم.
در مثال زیر ما یک صفحه html را ایجاد کرده ایم و در تگ style رنگ پس زمینه را آبی قرار داده ایم.
حال اگر سایز صفحه را تغییر دهید و به کوچکتر از 480 پیکسل ببرید می بینید که رنگ پس زمینه سبز خواهد شد.
این کار با دستور @media در css انجام می شود.
چنانچه فردی با موبایل با سایز کمتر از 480 پیکسل این صفحه را ببینید پس زمینه یا بک گروند آن سبز است.
<html>
<head>
<style>
body {
background-color: cornflowerblue;
}
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<p>Resize - media query</p>
</body>
</html>
مثال Media Query
در این قسمت مثال Media Query را با هم بررسی می کنیم.
در مثال زیر ما یک منو در سمت چپ و یک متن در سمت راست داریم.
هنگامی که صفحه را کوچک و بزرگ می کنید مشاهده می کنید که وقتی سایز صفحه کوچک می شود منو بالای متن قرار می گیرد و کل عرض صفحه را شامل می شود.
این کار توسط دستور Media Query انجام می شود.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}
#main {margin-left: 4px;}
#leftsidebar {
float: none;
width: auto;
}
#menulist {
margin: 0;
padding: 0;
}
.menuitem {
background: #CDF0F6;
border: 1px solid #d4d4d4;
border-radius: 4px;
list-style-type: none;
margin: 4px;
padding: 2px;
}
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="leftsidebar">
<ul id="menulist">
<li class="menuitem">Menu-item 1</li>
<li class="menuitem">Menu-item 2</li>
<li class="menuitem">Menu-item 3</li>
<li class="menuitem">Menu-item 4</li>
<li class="menuitem">Menu-item 5</li>
</ul>
</div>
<div id="main">
<h1>TopSite98.com</h1>
<p>This example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider. If the viewport is less than 480 pixels, the menu will be on top of the content.</p>
</div>
</div>
</body>
</html>
پنهان شدن عنصر با Media Query
حال مثال پنهان شدن عنصر با Media Query را بررسی می کنیم.
در مثال زیر وقتی سایز صفحه از 600 پیکسل کمتر شود یعنی صفحه را کوچکتر می کنیم یک باکس که در آن topsite98 قرار دارد ناپدید می شود.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgreen;
padding: 20px;
}
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
</style>
</head>
<body>
<h2>Hide elements on different screen sizes</h2>
<div class="example">TopSite98.com</div>
</body>
</html>
پروژه طراحی قالب سایت ریسپانسیو
پروژه طراحی قالب سایت ریسپانسیو با استفاده از flexbox و media query را در زیر مشاهده می کنید.
در این پروژه یک صفحه وب واکنشگرا یا ریسپانسیو قرار دارد که می توانید آن را در یک فایل html قرار داده و تست نمایید.
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial;
margin: 0;
}
/* Header/logo Title */
.header {
padding: 60px;
text-align: center;
background: #1abc9c;
color: white;
}
/* Style the top navigation bar */
.navbar {
display: flex;
background-color: #333;
}
/* Style the navigation bar links */
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
flex: 70%;
background-color: white;
padding: 20px;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media (max-width: 700px) {
.row, .navbar {
flex-direction: column;
}
}
</style>
</head>
<body>
<!-- Note -->
<div style="background:yellow;padding:5px">
<h4 style="text-align:center">Resize the browser window to see the responsive effect.</h4>
</div>
<!-- Header -->
<div class="header">
<h1>TopSite98</h1>
<p>With a <b>flexible</b> layout.</p>
</div>
<!-- Navigation Bar -->
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<!-- The flexible grid (content) -->
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<!-- Footer -->
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
امیدواریم این آموزش از تاپ سایت 98 برای شما مفید باشد.
موفق باشید.
منبع: دبلیو تری اسکولز
تگ: ریسپانسیو
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید