رسپانسیو کردن وبسایت
سلام خسته نباشید من در دوره css هستم و بخش رسپانسیو کردن وبسایت رو کامل مشاهده کردم اما با اینکه چند بار ویدیو ها رو مشاهده کردم بازم نمیتونم درست رسپانسیو کنم آیا در دوره های بعدی بیشتر ازش استفاده میشه که من بهتر یاد بگیرم ؟؟
پاسخ‌ها
8
سلام دوست عزیز
ببین بحث این نیست که دوره بعدی ازش زیاد استفاده میشه یا نه!
بحث اصلی اینه سایتی ک اینروزا رسپانسیو نباشه فاقد اهمیته و درواقع در بخش سئو مشکل اساسی داره!
از نون شب برات واجب تر باشه رسپانسیو...
دوره رو کامل مشاهده کن و تمرین کن تا تمریناتت زیاد نباشه اموزش زیاد به دردت نمیخوره
خب از کجا مثال های بیشتر رو پیدا کنم ؟؟
گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد
منظورتون از «درست نمیتونم ریسپانسیو» کنم چیه دقیقا...؟ کاش دقیق تر توضیح بدین تا دوستانتون بتونن کمک کنند.
کدها کار نمی‌کنن اصلا یا بهم ریز میشه یا سخته یا ....؟
ریسپانسیو سازی خودش بصورت مستقل عمل نمی‌کنه و لازمه اش اینه که شما از ابتدا موقع طراحی و پیاده سازی و همچنین نوشتن کدهای html هم رویکرد ریسپانسیوسازی رو داشته باشید. نمیشه یهویی و فارغ از همه ماجرا واردش شد یا حداقل کار تمیز در نمیاد یا خیلیییی سخت میشه.
یعنی اینکه باید برای هر چیزی که داخل وبسایت قرار هست قرار داده بشه باید از مدیا کوئری استفاده کنیم ؟
سوال دوم : ابتدا بهتر هست که از موبایل ها وبسایت رو طراحی کنیم یا از حالت تبلت یا دسکتاپ ؟؟
سوال سوم : در دوره طراحی وب راکت روش رسپانسیو کردن رو به شکل کامل توضیح داده شده ؟؟
سلام
تنها را فقط تمرین هست
اگه هزار ساعت هم فیلم آموزشی بیینی ولی تا دست به کد نشی متوجه نمیشی!
من دقیقا و کاملا نمیدونم چجوری باید این کار رو بکنم ؟؟
سلام
دوست عزیز وقتی استایلی را برای صفحه را طراحی میکنید باید در پیکسل های مختلف هم استایل قشنگ در نظر بگیرید یعنی با اندازه صفحه موبایل یا تبلت مچ باشه و این کار را با مدیا کوئری css انجام میدید. برای درک بهتر یک نمونه ساده برای سه پیکسل مختلف نوشتم.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Queries Simple Example</title>
<style>
* {
font-family: vazir;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.section {
width: 100%;
display: flex;
}
.div1 {
width: 100%;
height: 200px;
background-color: #a81fdf;
}
.div2 {
width: 100%;
height: 200px;
background-color: #38a6e6;
}
.div3 {
width: 100%;
height: 200px;
background-color: #4de040;
}
h1 {
padding-top: 45px;
text-align: center;
font-size: 60px;
color: #fff;
}
@media screen and (max-width: 950px) {
.section {
flex-direction: column;
}
h1 {
color: #000000;
}
}
@media screen and (max-width: 410px) {
h1 {
font-size: 30px;
}
.div1 {
background-color: #df8c1f;
}
.div3 {
background-color: #e04540;
}
}
</style>
</head>
<body>
<section class="section">
<div class="div1">
<h1>Test1</h1>
</div>
<div class="div2">
<h1>Test2</h1>
</div>
<div class="div3">
<h1>Test3</h1>
</div>
</section>
</body>
</html></body></html>
از ltbrowser استفاده کنید از بیشتر لپتاپ ها و.. پشتیبانی میکنه