anamzd2ab
October 27th, 2013, 16:39
طراحی قالب وب سایت (http://sitedesign.joomir.com/%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA/item/652-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%82%D8%A7%D9%84%D8%A8-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%B1%D8%A7%DB%8C%DA%AF%D8%A7%D9%86.html) سازگار با موبایل کار ساده ای نیست و نیاز به تجربه فراوانی دارد. در صورتی که تجربه ای در ساخت سایت (http://sitedesign.joomir.com/) سازگار با موبایل ندارید این کار را به طراحی سایت دارکوب بسپارید. طراحی سایت سازگار با موبایل بسیاری از هزینه های شما در مقایسه با طراحی جداگانه سایت برای موبایل را پایین می آورد. برای ساخت سیستم ستون بندی می بایست جهت صفحه بندی کلاس ستون اول و آخر را بدانید. البته بدون دانستن ستون اول و آخر نیز می توانید ستون بندی سازگار با انواع مرورگرها را داشته باشد. در این مقاله می خواهم به شما نحوه ساخت سیستم ستون بندی سازگار با موبایل توسط nth-of-type دستور css را آموزش دهم. لازم نیست کلاس ستون آخر و اول داشته باشید و یا تعداد ستون ها را بدانید، زیرا همه کارها توسط viewport انجام می شود. زیرا در سایزهای مختلف مرورگر و رزولوشن صفحه قالب به ستون های مختلف تبدیل می گردد.بروز خطا در استفاده از کلاس اول و آخربه صورت پیش فرض می بایست کلاس ستون اول و آخر (.first و .last) را به کدهای خود اضافه نماییم ولی انجام این کار برای پیاده سازی قالب مناسب برای رزولوشن های مختلف مشکل ایجاد می نماید.http://sitedesign.joomir.com/images/first-and-last-class.pngاستفاده از nth-of-typeدستور زیر به شما امکان ایجاد فلوت و مارجین را بدون استفاده از (.first و .last) می دهد.:nth-of-type(An+B)
- دستور زیر ستون های 4 ام از ستون 1 را انتخاب می نماید..grid4 .col:nth-of-type(4n+1)
- دستور زیر ستون های3 ام از ستون 1 را انتخاب می نماید..grid3 .col:nth-of-type(3n+1)
- دستور زیر ستون های 2 ام از ستون 1 را انتخاب می نماید..grid2 .col:nth-of-type(2n+1)
http://sitedesign.joomir.com/images/nth-of-type-columns.png.grid4 .col:nth-of-type(4n+1), .grid3 .col:nth-of-type(3n+1), .grid2 .col:nth-of-type(2n+1)
{ margin-left: 0; clear: left; }
سازگاری با موبایل توسط Media Queries/* col */
.col { background: #eee; float: left; margin-left: 3.2%; margin-bottom: 30px; }
/* grid4 col */
.grid4 .col { width: 22.6%; }
/* grid3 col */
.grid3 .col { width: 31.2%; }
/* grid2 col */
.grid2 .col { width: 48.4%; }
تبدیل 4 ستونه به 3 ستونهبرای تبدیل 4 ستونه به 3 ستونه که عرض آن کمتر از 740px می باشد1. تبدیل عرض .grid4 .col به 31.2% 2. بازنویسی left margin و clear3. ست نمودن مجدد left margin و clear property توسط دستور nth-of-type(3n+1) برای ایجاد قالب سه ستونهhttp://sitedesign.joomir.com/images/responsive-columns.png@media screen and (max-width: 740px)
{ .grid4 .col { width: 31.2%; }
.grid4 .col:nth-of-type(4n+1) { margin-left: 3.2%; clear: none; }
.grid4 .col:nth-of-type(3n+1) { margin-left: 0; clear: left; }
}
تبدیل 4 ستونه و 3 ستونه به 2 ستونهبرای تبدیل 4 ستونه به 3 ستونه و 2 ستونه که عرض صفحه کمتر از 600px باشد نیز به همان روش بالا اقدام نمایید.@media screen and (max-width: 600px)
{ /* change grid4 to 2-column */
.grid4 .col { width: 48.4%; }
.grid4 .col:nth-of-type(3n+1) { margin-left: 3.2%; clear: none; }
.grid4 .col:nth-of-type(2n+1) { margin-left: 0; clear: left; }
/* change grid3 to 2-column */
.grid3 .col { width: 48.4%; }
.grid3 .col:nth-of-type(3n+1)
{ margin-left: 3.2%; clear: none; }
.grid3 .col:nth-of-type(2n+1)
{ margin-left: 0; clear: left; }
}
تمام عرض کردن تمامی ستون هابرای تمام عرض کردن کلیه ستون ها که رزولوشن صفحه آنها از 400px: کمتر است می بایست به روش زیر اقدام شود.@media screen and (max-width: 400px)
{
.col { width: 100% !important; margin-left: 0 !important; clear: none !important; }
}
مشکلات اینترنت اکسپلوررهم media queries and nth-of-type توسط اینترنت اکسپلورر 8 به پایین پشتیبانی نمی شود. شما می توانید از selectivizr.js (http://selectivizr.com/) برای nth-of-type وrespond.js (https://github.com/scottjehl/Respond) برای media queries به جهت پشتیبانی اینترنت اکسپلورر استفاده نمایید. هر دوی selectivizr.js and respond.js متاسفانه به یکدیگر به خوبی کار نمی کنند بنابراین ستون بندی ها از 4 به 3 و 2 تغییر نمی یابند. البته فقط در اکسپلورر.
منبع :http://sitedesign.joomir.com/مقالات-طراحی-سایت/item/739-طراحی-قالب-وب-سایت-سازگار-موبایل-ریسپانسیو.html (http://sitedesign.joomir.com/%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA/item/739-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%82%D8%A7%D9%84%D8%A8-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%B3%D8%A7%D8%B2%DA%AF%D8%A7%D8%B1-%D9%85%D9%88%D8%A8%D8%A7%DB%8C%D9%84-%D8%B1%DB%8C%D8%B3%D9%BE%D8%A7%D9%86%D8%B3%DB%8C%D 9%88.html)
- دستور زیر ستون های 4 ام از ستون 1 را انتخاب می نماید..grid4 .col:nth-of-type(4n+1)
- دستور زیر ستون های3 ام از ستون 1 را انتخاب می نماید..grid3 .col:nth-of-type(3n+1)
- دستور زیر ستون های 2 ام از ستون 1 را انتخاب می نماید..grid2 .col:nth-of-type(2n+1)
http://sitedesign.joomir.com/images/nth-of-type-columns.png.grid4 .col:nth-of-type(4n+1), .grid3 .col:nth-of-type(3n+1), .grid2 .col:nth-of-type(2n+1)
{ margin-left: 0; clear: left; }
سازگاری با موبایل توسط Media Queries/* col */
.col { background: #eee; float: left; margin-left: 3.2%; margin-bottom: 30px; }
/* grid4 col */
.grid4 .col { width: 22.6%; }
/* grid3 col */
.grid3 .col { width: 31.2%; }
/* grid2 col */
.grid2 .col { width: 48.4%; }
تبدیل 4 ستونه به 3 ستونهبرای تبدیل 4 ستونه به 3 ستونه که عرض آن کمتر از 740px می باشد1. تبدیل عرض .grid4 .col به 31.2% 2. بازنویسی left margin و clear3. ست نمودن مجدد left margin و clear property توسط دستور nth-of-type(3n+1) برای ایجاد قالب سه ستونهhttp://sitedesign.joomir.com/images/responsive-columns.png@media screen and (max-width: 740px)
{ .grid4 .col { width: 31.2%; }
.grid4 .col:nth-of-type(4n+1) { margin-left: 3.2%; clear: none; }
.grid4 .col:nth-of-type(3n+1) { margin-left: 0; clear: left; }
}
تبدیل 4 ستونه و 3 ستونه به 2 ستونهبرای تبدیل 4 ستونه به 3 ستونه و 2 ستونه که عرض صفحه کمتر از 600px باشد نیز به همان روش بالا اقدام نمایید.@media screen and (max-width: 600px)
{ /* change grid4 to 2-column */
.grid4 .col { width: 48.4%; }
.grid4 .col:nth-of-type(3n+1) { margin-left: 3.2%; clear: none; }
.grid4 .col:nth-of-type(2n+1) { margin-left: 0; clear: left; }
/* change grid3 to 2-column */
.grid3 .col { width: 48.4%; }
.grid3 .col:nth-of-type(3n+1)
{ margin-left: 3.2%; clear: none; }
.grid3 .col:nth-of-type(2n+1)
{ margin-left: 0; clear: left; }
}
تمام عرض کردن تمامی ستون هابرای تمام عرض کردن کلیه ستون ها که رزولوشن صفحه آنها از 400px: کمتر است می بایست به روش زیر اقدام شود.@media screen and (max-width: 400px)
{
.col { width: 100% !important; margin-left: 0 !important; clear: none !important; }
}
مشکلات اینترنت اکسپلوررهم media queries and nth-of-type توسط اینترنت اکسپلورر 8 به پایین پشتیبانی نمی شود. شما می توانید از selectivizr.js (http://selectivizr.com/) برای nth-of-type وrespond.js (https://github.com/scottjehl/Respond) برای media queries به جهت پشتیبانی اینترنت اکسپلورر استفاده نمایید. هر دوی selectivizr.js and respond.js متاسفانه به یکدیگر به خوبی کار نمی کنند بنابراین ستون بندی ها از 4 به 3 و 2 تغییر نمی یابند. البته فقط در اکسپلورر.
منبع :http://sitedesign.joomir.com/مقالات-طراحی-سایت/item/739-طراحی-قالب-وب-سایت-سازگار-موبایل-ریسپانسیو.html (http://sitedesign.joomir.com/%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA/item/739-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%82%D8%A7%D9%84%D8%A8-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%B3%D8%A7%D8%B2%DA%AF%D8%A7%D8%B1-%D9%85%D9%88%D8%A8%D8%A7%DB%8C%D9%84-%D8%B1%DB%8C%D8%B3%D9%BE%D8%A7%D9%86%D8%B3%DB%8C%D 9%88.html)