در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش گام بە گام CSS: قسمت پانزدهم: Viewport چیست؟

Viewport

ViewPort به قسمت قابل مشاهده کاربر می گویند. مقادیر ViewPort متغیر است برای مثال در موبایل های هوشمند کوچکتر از کامپیوتر ها می باشد. همانطور که قبلا توضیح دادم، در ابتدای ساخت صفحات وب، صفحات مطابق با دستگاه تغییر سایز یا در واقع تغییر اندازه (ViewPort) نمی دادند.

با آمدن تکنولوژی HTML5 توانایی در اختیار گرفتن ViewPort برای ما بسیار ساده تر شده است. برای اینکار از تگ meta استفاده می شود.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

در مثال بالا از تگ meta با نام viewport استفاده شده است، این دستور باعث می شود که صفحه وب ما کنترل دستورالعمل های مرورگر را در اختیار بگیرد.

در قسمت دیگر از ویژگی content استفاده شده که برابر width=device-width قرار گرفته است، این ویژگی باعث می شود که عرض صفحه وب ما مطابق با عرض دستگاهی که در اختیار داریم واکنش نشان دهد.

قسمت آخر که جزو همان content است اولین سطح زوم کردن صفحه وب را در زمان لود صفحه قرار می دهد.

نکته: برای آنکه المنت هایتان در صفحات وب مطابق با اندازه تغییر کند بجای استفاده از مقادیر ثابت عددی از علامت % استفاده کنید. به مثال زیر توجه نمایید.

<!doctype html>
<html>
<head>
    <title> js </title>
<style>
    img
    {
        width: 80%;
    }
    p
    {
        width: 80%;
    }
    </style>
</head>
<body>  
 <img src="logo.png"/>
    <p>
    hello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITPro
    </p>
</body>
</html>

نویسنده : ارسطو عباسی

منبع : انجمن تخصصی فناوری اطلاعات ایران

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

#واکنشگرایی #آموزش_گام_به_گام_css #آموزش_css #آموزش_سی_اس_اس #آموزش_مقدماتی_css #سی_اس_اس
عنوان
1 آموزش گام به گام CSS قسمت اول : معرفی و آشنایی با نوشتن دستورات رایگان
2 آموزش گام به گام CSS قسمت دوم: شیوه های استفاده از CSS رایگان
3 آموزش گام به گام CSS قسمت سوم : رنگ ها و پشت زمینه ها رایگان
4 آموزش گام به گام CSS قسمت چهارم: حاشیه ها رایگان
5 آموزش گام به گام CSS قسمت پنجم: Margin , Padding , height , Width رایگان
6 آموزش گام به گام CSS قسمت ششم: متون رایگان
7 آموزش گام به گام CSS قسمت هفتم : فونت‌ و قالب‌های متنی رایگان
8 آموزش گام به گام CSS قسمت هشتم: لینک ها و لیست ها رایگان
9 آموزش گام به گام CSS قسمت نهم: جداول رایگان
10 آموزش گام به گام CSS قسمت دهم: Display و Max-width رایگان
11 آموزش گام به گام CSS قسمت یازدهم: موقعیت ها , Overflow رایگان
12 آموزش گام به گام CSS قسمت دوازدهم: جهت ها, تراز ها و غلظت رایگان
13 آموزش گام به گام CSS قسمت سیزدهم: شفافیت رایگان
14 آموزش گام بە گام CSS: قسمت چهاردهم: واکنشگرایی چیست؟ رایگان
15 آموزش گام بە گام CSS: قسمت پانزدهم: Viewport چیست؟ رایگان
زمان و قیمت کل 0″ 0
1 نظر
soheil One

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

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....