آخرین مطالب
امکانات وب
در این جلسه با ادامه موضوع مربوط به طراحی متریال با Materialize در خدمتتون هستم.
Materialize تعدادی کلاس داره که با استفاده از اون میتونین تصاویر و ویدیوهایی که در سایتتون قرار میدین رو برای طراحی واکنشگرا آماده کنید و بر روی هر دستگاهی به خوبی نمایش داده بشه.
کلاسهای که در این زمینه وجود داره عبارتند از:
- responsive-img : این کلاس باعث میشه که یک تصویر متناسب با سایز نمایشگر خودش رو مطابقت بده و تغییر اندازه بده.
- video-container : برای اون المنتهایی که واکنشگرا هستن و محتوای یک ویدیو هستن میتونین از این کلاس استفاده کنید و اون رو واکنشگرا کنید
- responsive-video : برای واکنشگرا کردن ویدیوهای HTML5 از این کلاس استفاده میشه.
مثالها
مربوط به تصاویر واکنشگرا:
1 2 3 4 5 6 | <div class="card-panel"> <img src="html5-mini-logo.jpg" alt="" class="responsive-img"> </div> <div class="card-panel"> <img src="html5-mini-logo.jpg" alt="" class="circle responsive-img"> </div> |
میبینید که به تصاویر موجود در کد بالا کلاس responsive-img اضافه شده و باعث میشه که اونا واکنشگرا بشن. به تصویر دومی هم کلاس circle اضافه شده و باعث میشه که border-radius به اون اعمال بشه و دایره ای بشه.
خروجی کد بالا بصورت زیر خواهد بود:
اگر سایز مرورگر رو تغییر بدین میبینید که زمانی که سایز تصویر از مرورگر بیشتر میشه، سایز اون بصورت اتوماتیک تغییر میکنه و خودشو مطابقت میده.
مربوط به ویدیو:
اگر بخواید به المنتی که درونش یک ویدیو قرار داده شده کلاس video-container اضافه کنید، بصورت زیر عمل میکنید:
<div class="video-container"> <iframe width="540" height="200" src="http://www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe> </div> |
میبینید که در div بالا یک iframe قرار داده شده و ویدیوی مورد نظر قرار داده شده. حالا میتونیم با دادن کلاس video-container به این Div، این ویدیو رو واکنشگرا کنیم و اونو بهینه سازی کنیم.
حالا فرض کنید که با استفاده از تگ HTML5 Video میخاید یک ویدیو رو در سایت خودتون قرار بدین. برای این کار باید بصورت زیر عمل کنید:
1 2 3 4 5 6 7 | <div> <video width="300" height="200" controls autoplay class="responsive-video"> <source src="http://www.tutorialspoint.com/html5/foo.ogg" type="video/ogg" /> <source src="http://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4" /> Your browser does not support the video element. </video> </div> |
میبینید که در تگ بالا به تگ video بصورت مستقیم کلاس responsive-video اعمال شده و باعث میشه که این المنت واکنشگرا بشه و در سایزهای مختلف حالت خودشو حفظ کنه.
خروجی بصورت زیر هست:
میتونین این موارد رو خودتون هم تست کنید. تمام کدها رو بصورت کامل در پایین براتون قرار میدم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html> <head> <title>The Materialize Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> </head> <body class="container"> <h2>Materialize Media Examples</h2> <hr/> <h3>Images Demo</h3> <div class="card-panel"> <img src="html5-mini-logo.jpg" alt="" class="responsive-img"> </div> <div class="card-panel"> <img src="html5-mini-logo.jpg" alt="" class="circle responsive-img"> </div> <h3>Responsive Embeded Video Demo</h3> <div class="video-container"> <iframe width="540" height="200" src="http://www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe> </div> <div class="video-container"> <video width="300" height="200" controls autoplay> <source src="http://www.tutorialspoint.com/html5/foo.ogg" type="video/ogg" /> <source src="http://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4" /> Your browser does not support the video element. </video> </div> </body> </html> |
امیدوارم از این مطلب خوشتون اومده باشه.
موفق و پیروز باشید
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 317
آرشیو مطالب
- دی 1394
- بهمن 1394
- اسفند 1394
- دی 1395
- بهمن 1395
- اسفند 1395
- فروردين 1395
- ارديبهشت 1395
- خرداد 1395
- تير 1395
- مرداد 1395
- شهريور 1395
- مهر 1395
- آبان 1395
- آذر 1395
- دی 1396
- بهمن 1396
- اسفند 1396
- فروردين 1396
- ارديبهشت 1396
- خرداد 1396
- تير 1396
- مرداد 1396
- شهريور 1396
- مهر 1396
- آبان 1396
- آذر 1396
- دی 1397
- بهمن 1397
- اسفند 1397
- فروردين 1397
- ارديبهشت 1397
- خرداد 1397
- تير 1397
- مرداد 1397
- شهريور 1397
- آذر 1397
- دی 1398
- بهمن 1398
- اسفند 1398
- ارديبهشت 1398
- تير 1398
- مرداد 1398
- مهر 1398
- آبان 1398
- آذر 1398
- فروردين 1399
- ارديبهشت 1399
- خرداد 1399
- تير 1399
- شهريور 1399
- بهمن 1400
- اسفند 1400
- ارديبهشت 1400
- دی 1401
- بهمن 1401
- اسفند 1401
- ارديبهشت 1401
- خرداد 1401
- تير 1401
- مرداد 1401
- شهريور 1401
- مهر 1401
- آبان 1401
- آذر 1401
- دی 1402
- بهمن 1402
- اسفند 1402
- فروردين 1402
- ارديبهشت 1402
- خرداد 1402
- تير 1402
- مرداد 1402
- شهريور 1402
- مهر 1402
- آبان 1402
- آذر 1402
- فروردين 1403
- ارديبهشت 1403