جستجو برای:
  • دوره‌های آموزشی
    • کسب و کار اینترنتی پولساز
    • تبدیل ایده به محصول
    • خلق استراتژی کسب و کار
    • ایجاد مزیت رقابتی در کسب و کار
  • آموزش رایگان
    • دوره رایگان کسب و کار اینترنتی
    • ویدیوهای آموزشی
    • پادکست‌های آموزشی
  • وبلاگ
    • کسب و کار اینترنتی
      • کارآفرینی اینترنتی
      • کار در منزل
      • ایده های پولساز
      • مدیریت کسب و کار اینترنتی
    • بازاریابی اینترنتی
      • سئو
      • ایمیل مارکتینگ
      • سوشیال مارکتینگ
      • اینستاگرام مارکتینگ
      • همکاری در فروش
    • کارآفرینی
      • ایده های کارآفرینی
      • کسب درآمد
      • استارت آپ
      • برندسازی
      • موفقیت فردی
      • معرفی کارآفرینان برتر
  • کسب درآمد
  • حساب کاربری
تلفن تماس: ۲۳۴۵۶ ۲۸۴ ۰۲۱
بهترین ایده
  • دوره‌های آموزشی
    • کسب و کار اینترنتی پولساز
    • تبدیل ایده به محصول
    • خلق استراتژی کسب و کار
    • ایجاد مزیت رقابتی در کسب و کار
  • آموزش رایگان
    • دوره رایگان کسب و کار اینترنتی
    • ویدیوهای آموزشی
    • پادکست‌های آموزشی
  • وبلاگ
    • کسب و کار اینترنتی
      • کارآفرینی اینترنتی
      • کار در منزل
      • ایده های پولساز
      • مدیریت کسب و کار اینترنتی
    • بازاریابی اینترنتی
      • سئو
      • ایمیل مارکتینگ
      • سوشیال مارکتینگ
      • اینستاگرام مارکتینگ
      • همکاری در فروش
    • کارآفرینی
      • ایده های کارآفرینی
      • کسب درآمد
      • استارت آپ
      • برندسازی
      • موفقیت فردی
      • معرفی کارآفرینان برتر
  • کسب درآمد
  • حساب کاربری
0

ورود و ثبت نام

بلاگ

بهترین ایده / طراحی سایت / واکنش گرایی html

واکنش گرایی html

واکنش گرایی html  چیست؟ و چه مزایایی دارد؟

آموزش  html  درس بیست و پنجم

طراحی وب واکنشگرا چیست؟

واکنش گرایی html   :طراحی وب واکنشگرا باعث می شود که صفحه وب در همه دستگاه ها (دسکتاپ، تبلت و تلفن) خوب ظاهر شود.
طراحی وب واکنشگرا در مورد استفاده از HTML و CSS برای تغییر اندازه، پنهان کردن، کوچک کردن، بزرگنمایی یا انتقال محتوا است تا آن را در هر صفحه نمایشی خوب ببینیم.

طراحی ظاهر  html  با css را از اینجا ببینید

نکته : هر صفحه وب باید در هر دستگاهی خوب به نظر برسد.

واکنش گرایی html
واکنش گرایی html

واکنش گرایی html : تنظیم  Viewport

هنگام ساخت صفحات وب واکنشگرا، عنصر    <meta> در زیر را به تمام صفحات وب خود اضافه کنید:

مثال:

[php]
<meta name="viewport" content="width=device-width, initial-scale=1.0">
[/php]

این Viewport صفحه شما را تنظیم می کند، که دستورالعمل هایی را به مرورگر می دهد که چطور ابعاد صفحه و مقیاس بندی را کنترل کند.

واکنش گرایی html : تصاویر واکنشگرا

تصاویر واکنشگرا، تصاویری هستند که به راحتی در هر اندازه ای با  مرورگر متناسب اند.

استفاده از width Property

اگر ویژگی عرض 100٪ تنظیم شود، تصویر واکنشگرا خواهد بود و مقیاس بالا و پایین می شود.

مثال :

[php]
<img src="img_girl.jpg" style="width:100%;">
[/php]

توجه داشته باشید که در مثال بالا، تصویر را می توان بزرگتر از اندازه اصلی آن دانست. در بسیاری از موارد یک راه حل بهتر، استفاده از ویژگی حداکثر عرض است.

استفاده از خاصیت max-width

اگر مقدار حداکثر عرض  یا max-width به 100٪ تنظیم شود،  اگر بخواهید مقیاس آن کمتر می شود ، اما هرگز مقیاس آن  بزرگتر از اندازه اصلی نمی شود.

مثال :

[php]
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
[/php]

 

نمایش تصاویر مختلف با توجه به عرض مرورگر

عنصر  <picture> به شما اجازه می دهد تا تصاویر مختلف را برای اندازه پنجره های مختلف مرورگر تعریف کنید.
مثال :

[php]
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>
[/php]

اندازه متن واکنشگرا

اندازه متن را می توان با واحد “vw” تنظیم کرد که به معنی “viewport width” است.
به این ترتیب اندازه متن از اندازه پنجره مرورگر پیروی می کند:

مثال:

[php]

<h1 style="font-size:10vw">Hello World</h1>

[/php]

 

Media Queries

علاوه بر تغییر اندازه متن و تصاویر، همچنین استفاده از Media Queries در صفحات وب واکنشگرا معمول است.با استفاده از Media Queries شما می توانید استایل های کاملا متفاوت برای اندازه های مختلف مرورگر تعریف کنید.

 

[php]
<style>
.left, .right {
float:left;
width:20%; /*The width is 20%, by default*/
}

.main {
float:left;
width:60%; /*The width is 60%, by default*/
}

/*Use a media query to add a breakpoint at 800px:*/
@media (max-width:800px) {
.left, .main, .right {
width:100%; /*The width is 100%, when the viewport is 800px or smaller*/
}
}
</style>
[/php]

صفحه وب واکنشگرا – مثال کامل

 

یک صفحه وب واکنشگرا باید  روی صفحه نمایش بزرگ و تلفن های همراه کوچک خوب به نظر برسد.

 

طراحی وب واکنشگرا – Frameworks

 

تعداد زیادی فریم ورک های  css  وجود دارد که طراحی واکنشگرا ارائه می دهند. آنها رایگان و برای استفاده آسان هستند.

 

استفاده از W3.CSS

 

یک راه عالی برای ایجاد یک طراحی واکنشگرا،استفاده از style sheet واکنشگرا است مثل W3.CSS

W3.CSS توسعه سایت ها را آسان تر می کند که در هر اندازه در دستکتاپ، لپ تاپ، تبلت، یا تلفن خوب به نظر می رسد:

مثال:

[php]
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container w3-green">

<h1>W3Schools Demo</h1>

Resize this responsive page!

</div>

<div class="w3-row-padding">

<div class="w3-third">

<h2>London</h2>

London is the capital city of England.

It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.

</div>

<div class="w3-third">

<h2>Paris</h2>

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.

</div>

<div class="w3-third">

<h2>Tokyo</h2>

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.

</div>

</div>

</body>
</html>
[/php]

 

Bootstrap

 

یکی دیگر از فریم ورک های محبوب   بوت استرپ است. بوت استرپ از  HTML, CSS , jQuery  استفاده می کند تا صفحات وب واکنشگرا بسازد.

مثال :

[php]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F3.2.0%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.3.7%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</head>
<body>

<div class="container">

<div class="jumbotron">

<h1>My First Bootstrap Page</h1>

</div>

<div class="row">

<div class="col-sm-4">
…
</div>

<div class="col-sm-4">
…
</div>

<div class="col-sm-4">
…
</div>

</div>

</div>

</body>
</html>
[/php]

 

 

 

۱
۲
۳
۴
۵
میانگین امتیازات ۵ از ۵
از مجموع ۱ رای
اشتراک گذاری:
برچسب ها: HTML
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

iman.ghasedian

بهت کمک می‌کنم توجهت رو بذاری روی خودت و عمیق‌تر زندگی‌‌‌وحالت رو تغییر بدی

این بازی یک‌ بازی معمولی نی این بازی یک‌ بازی معمولی نیست بلکه فلسفه زندگی توه 🎲❤️

صفحه بازی، صفحه زندگی توه
‌و تو بازیگری 🎲❤️
همه اون فرصت‌هایی که تو زندگی سر راهت قرار می‌گیره، نردبان‌های بازی هستن و تمام مسائل، مشکلات، شکست‌ها، درد ‌‌و رنج‌ها، نیش مارهای این بازی 🎲❤️

تو این بازی من ۷ درس مهم یاد گرفتم که به توهم گفتم 🎲❤️

حتما ازت میخوام دوتا استیکر 🎲❤️ پایین پست برام بذاری 🎲❤️

منتظرم رفیق 🎲❤️

#بازی #زندگی #فلسفه #ماروپله #شانس #خوشحالی #ناراحتی #روانشناسی #فرزند #صبر #ایمان_قاصدیان #ایران
توضیحات سفر رو حتما بخون 😍 توضیحات سفر رو حتما بخون 😍
۲۸ اردیبهشت ۱۴۰۱

به همراه یک گروه‌باحال زدیم به دل طبیعت

🚌 صبح ساعت ۵ صبح از تهران راه افتادیم 
به سمت جاده چالوس

یک توقف تونل کندوان داشتیم و صبحانه خوردیم  و به سمت مقصد از یکی از خروجی‌های جاده چالوس خارج شدیم و‌ جاده کاملا شیبدار بود و در عرض ۲۰ دقیقه چیزی حدود ۱۵۰۰ متر ارتفاع از سطح دریا گرفتیم

طبیعت فوق العاده بی‌نظیری بود…

😍 به مقصد رسیدیم و در یک خانه روستایی بسیار باصفا وسایل رو گذاشتیم و با نون محلی و پنیر تازه و چایی شیرین از ما استقبال شد…

بعد از اینکه توی روستا دوری زدیم ‌‌کنار رودخونه پایی به آب زدیم برگشتیم و نهار خوردیم و بعد از یک استراحت کوتاه سوار تراکتور شدیم و تا دامنه کوه رفتیم و از اونجا که از تراکتور پیاده شدیم ۱۲ کیلومتر در مسیری که توی ویدیو می‌بینید هایکینگ داشتیم تا رسیدیم به یک چشمه و بعد ۱۵ دقیقه‌ از چشمه که بالاتر رفتیم رسیدیم به یک یخچال طبیعی…

واقعا طبیعت بکر و بی‌نظیری بود 😍
خدارو هزار مرتبه شکر کردم بخاطر این همه زیبایی…و این همه نعمت و از همه مهم‌تر سلامتی 

  من عاشق طبیعت‌های بکر‌ و خلوت هستم برای افزایش تمرکز و سطح انرژیم و
تو این سالها با دوست فوق العاده ای آشنا شدم که تورلیدر هست و کلا تورهاش بصورت بکرگردی هست و بسیار پسر فوق‌العاده‌ای هست 
آیدی پیجش رو میذارم که اگه‌دوست داشتید باهاش طبیعت گردی برید شاید قسمت بود در تور مشترکی همسفر شدیم

@safaryab.us 

بعد از این پیاده روی نسبتا سنگین، تا خود روستا پیاده برگشتیم و واقعا خسته شدیم اما سرشار از انرژی 

بعد یه آتیش باحال درست کردیم و با چند تا از دوستان نشستیم دورش 

یک‌شام‌سبک خوردیم و خوابیدیم 😴

🌞 صبح طبق عادت ساعت ۵:۳۰ صبح بیدار شدم

ادامه در کامنت…

______________________
خیلی خوشحال میشم احساست رو از دیدن این ویدیو برام بنویس ❤️ یا با یه استیکر 😎✌️👏😍🤩✋ منتظرم …
______________________

🎬: @iman.ghasedian 

🎵: @amiralibahadori 
______________________

#نگرانی #آینده #خوشبختی #سفر #طبیعت #طبیعت_ایران #حال_خوب #انرژی_مثبت #فیلم #موزیک #طبیعت_بکر #ایمان_قاصدیان #سفریاب
چرا انقدر شروع بی‌پایان داریم تو زندگی‌مون؟
چرا هی شروع کردیم و وسط راه ولش کردیم؟

تو این پادکست توضیح دادم…

توی کامنت از تجربه شروع بی پایان خودت برام بنویس

#شروع #تصمیم #تصمیم_گیری #احساسی #احساس #اطلاعات #فقر #ثروت #ایران #گرانی #تورم #ایمان_قاصدیان #تحول #تحول_بزرگ
❤️بخش دوم لایو شماره ۱ سفر ❤️بخش دوم لایو شماره ۱ سفر تحول بزرگ

_______________

دوره 👇رایگان تحول بزرگ
@iman.ghasedian 
_______________

توی این ویدیو می تونی کل مطالب آموزشی ۲۳ روز اول تحول بزرگ + یکسری محتوای مکمل در لایو ارائه شد که به دلیل دایرکت‌ها و درخوا‌ست شما که موفق به حضور در لایو نشدید تصمیم گرفتم بلافاصله بعد از لایو این ‌ویدیو رو که حتی از لایو اصلی هم کامل‌تره 

ویدیو بدلیل تایم بالا به دو بخش قسمت شد که بخش اولش رو دیشب گذاشتم 

#سفر #تحول #تحول_درون #خودشناسی #آرامش #ایمان_قاصدیان #تغییر #زندگی #اکسپلور #اینستاگرام
❤️بخش اول لایو شماره ۱ سفر ❤️بخش اول لایو شماره ۱ سفر تحول بزرگ

_______________

دوره 👇رایگان تحول بزرگ
@iman.ghasedian 
_______________

توی این ویدیو می تونی کل مطالب آموزشی ۲۳ روز اول تحول بزرگ + یکسری محتوای مکمل در لایو ارائه شد که به دلیل دایرکت‌ها و درخوا‌ست شما که موفق به حضور در لایو نشدید تصمیم گرفتم بلافاصله بعد از لایو این ‌ویدیو رو که حتی از لایو اصلی هم کامل‌تره 

ویدیو بدلیل تایم بالا به دو بخش قسمت شد که فردا بخش دو گذاشته میشه در پیج

#سفر #تحول #تحول_درون #خودشناسی #آرامش #ایمان_قاصدیان #تغییر #زندگی #اکسپلور #اینستاگرام
دوره رایگان تحول بزرگ در اینستاگرام
مطالب زیر را حتما بخوانید
  • طراحی واکنش گرا
    چرا طراحی سایت واکنش گرا مهم است؟

    1.31k بازدید

  • طراحی سایت
    طراحی سایت و رازهای فروش بیشتر

    2.18k بازدید

  • پوسته فرزند
    پوسته فرزند چیست و چگونه پوسته فرزند ایجاد کنیم؟

    1.24k بازدید

  • شروع کار css
    شروع کار css

    1.47k بازدید

  • سینتکس و انتخابگرهای css
    سینتکس و انتخابگرهای css

    1.24k بازدید

  • معرفی css
    معرفی css

    1.32k بازدید

دیدگاهتان را بنویسید لغو پاسخ

آکادمی
  • کسب و کار اینترنتی
  • بازاریابی اینترنتی
  • ایده های پولساز
  • ایمیل مارکتینگ
  • مهارت های پولساز
  • افزایش فالوور اینستاگرام
  • کسب درآمد از اینستاگرام
  • افزایش ترافیک سایت
پربازدید
  • دوره رایگان
  • درباره ما
  • همکاری در فروش
  • تماس با ما
جستجو برای:
بهترین ایده
با آموزش کسب و کار اینترنتی از ایده‌های پولساز تا یادگیری مهارت‌های پولساز در کنار شما هستیم. کمک می‌کنیم یک کسب و کار خانگی در منزل راه‌اندازی کنید. ما به شما آموزش می‌دهیم با کار در منزل و فقط با موبایل و بدون سرمایه پولسازی از اینترنت را شروع کنید.
بهترین ایده : کسب و کار اینترنتی برای همه | © Copyright 2021 behtarinideh

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت