طراحی وب سایت واکنش گرا با استفاده از Media Query
دوشنبه 14 دی 1394وب سایت واکنش گرا یا responsive به سایتهایی گفته می شوند که عناصر داخل آن در تمام ابزار ها از جمله موبایل، تبلت و غیره به درستی نمایش داده می شود. برای ایجاد سایت های واکنش گرا روش های متفاوتی وجود دارد. در این مقاله از media Query برای ایجاد وب سایت واکنش گرا استفاده می کنیم.
Media query نوعی از media می باشد که دامنه صفحات style sheet را توسط ویژگی های media برای ویژگی هایی مانند عرض، ارتفاع و رنگ محدود می کند.Media query یکی از ویژگی های CSS3 می باشد. حالا پایه و اساس media query را توضیح می دهیم.
media query به صورت لینک زیردر Head صفحه تعریف می شود:
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
تعریف media query در صفحه Stylesheet:
.facet_sidebar {
Style
}
}
مثال بالا یک syntax ساده از media query می باشد.
حالا در مثال زیر بهتر متوجه آن می شویم.
اگر یک صفحه مانند زیر داشته باشیم:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
<div class="blog-container">
<div class="left-section">ستون سمت چپ</div>
<div class="right-section">ستون سمت راست</div>
<img src="images/Logo_01.jpg" />
</div>
</body>
</html>
که استایل های CSS آن به صورت زیر است:
.blog-container {
width: 700px;
margin-right: auto;
}
.left-section {
width: 400px;
float: left;
background: green;
}
.right-section {
width: 300px;
float: right;
background: red;
}
خروجی به صورت زیر خواهد شد:
میبینید زمانی که صفحه را resize می کنیم، responsive نخواهد بود.
بنابراین یک scroll به صورت افقی اتفاق میافتد. یک طراحی واکنش گرا هیچ وقت scroll به صورت افقی ندارد. بنابراین باید طوری صفحه را طراحی کنیم که در تمام ابزارها یا صفحات responsive یا واکنش گرا باشد.
در اینجا این کار را برای اندازه 500PX انجام می دهیم.
حالا CSS را ویرایش می کنیم.
خروجی برای اندازه زیر 500px به صورت زیر می باشد.
این خروجی هیچ scroll ای ندارد. هنوز این خروجی جذاب نیست، اجازه دهید تغییرات بیشتری ایجاد کرده و یک متن و تصویر قابل مشاهده را با شیوه ای متفاوت نشان دهیم:
body {
}
.blog-container {
width: 700px;
margin-right: auto;
}
.left-section {
width: 400px;
float: left;
background: green;
}
.right-section {
width: 300px;
float: right;
background: red;
}
@media screen and (max-width:500px) {
.blog-container {
width:100%;
}
.left-section {
width:70%;
float: left;
background: green;
}
.right-section {
width:30%;
float: right;
background: red;
}
}
@media screen and (max-width:350px) {
.left-section {
width:100%;
background: green;
}
.right-section {
width:100%;
background: red;
}
img {
width:100%;
}
}
خروجی برای این صفحات به صورت زیر است:
برای تصویر کامل:
برای کمتر از 500px
و برای کمتر از 350px
در روشی مشابه می توانیم media query هایی برای تمام صفحات اضافه کنیم. و می توان همان وب سایت را با کد مشابه فقط با تغییرات media query نشان داد. این قدرت media query است.
- HTML
- 2k بازدید
- 7 تشکر