میلاد صادقی
4 سال پیش توسط میلاد صادقی مطرح شد
10 پاسخ

چیدمان در رزولوشن های مختلف

سلام دوستان خسته نباشید من چندتا آیتم رو میخواستم داخل صفحم قرار بدم به نحوی که صفحم توی سایزهای مختلف اسکرول نخوره و آیتم هام توی سایز های مختلف کامل صفحم رو پر کنن برای مثال نمونه درستی که مدنظرم هست مثل شکل زیر هست:

اما توی رزولوشن های مختلف یا باکس هام از کادر بیرون میزنن که باعث اسکرول خوردن صفحه میشه یا کوچیک میشن پایین صفحه خالی میوفته میخواستم ببینم چجوری باکس ها را تنظیم کنم که توی همه دیوایس ها خودش ارتفاع باکس رو بصورت خودکار برام تنظیم کنه و توی سایزهای مختلف باکس ها مثل شکل بالا قرار بگیرن ممنون میشم راهنمایی کنید
@hesammousavi
@ali.bayat


ثبت پرسش جدید
میلاد صادقی
تخصص : لاراول
@miladsadeghi 4 سال پیش مطرح شد
میلاد صادقی
تخصص : لاراول
@miladsadeghi 4 سال پیش مطرح شد
میلاد صادقی
تخصص : لاراول
@miladsadeghi 4 سال پیش مطرح شد
رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 4 سال پیش مطرح شد
0

درود...

<div class="col-md-12">
        <div class="row">
            <div class="col-md-4">1</div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

سلام متوجه سوال تون نشدم.
این عکس ها همینطور، چرا سه عکس قرار دادین؟


آرین حسینی
تخصص : Solidity Developer. Blockchai...
@arian 4 سال پیش آپدیت شد
0

@miladsadeghi
سلام وقت بخیر
الان دقیق یادم نیست در این موقع چه کارهایی میکردم ، ولی به content اصلیتون height :100% بدید و بعدش width, height باکس هاتون رو هم به درصد بدید، ببینید درست میشه یانه.


احسان قربانی
تخصص : PHP ، در حال یادگیری لاراول ،...
@TimeRunner2359 4 سال پیش مطرح شد
0

@miladsadeghi
سلام و وقت بخیر
ای کد ، مشکل شما رو حل می‌کنه :
HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="app.css" />
    </head>
    <body>
        <div class="main">
            <div class="m">
                <div class="obj"></div>
                <div class="obj"></div>
            </div>
            <div class="m">
                <div class="obj"></div>
                <div class="obj"></div>
            </div>
            <div class="m">
                <div class="obj"></div>
                <div class="obj"></div>
            </div>
        </div>
    </body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    height: 100vh;
    width: 100vw;
}

div.main {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: center;
    padding: 5px;

}

div.m {
    width: 100%;
    height: 100%;
    padding: 5px;
    display: flex
}

.obj {
    height: 100%;
    width: 100%;
    margin: 3px;
    border: 3px solid cadetblue;
    border-radius: 5px;
    background: dodgerblue;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

موفق و سلامت باشید
یا حق


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

مفهوم وضوح ِ (resolution) تصویر متفاوت از مفهوم عرض صفحه نمایش (viewport width) هستش. کدهای شرطی شون هم باهم متفاوت میشه.
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp


علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 4 سال پیش مطرح شد
0

از Media Query + Flexbox استفاده کن
خیلی راحت تری


Morning Star
تخصص : علاقه مند به برنامه نویسی
@MorningStar 4 سال پیش مطرح شد
1

بااستفاده از flexbox و css grid و استفاده خوب از مدیاکوئری میتونی مشکلت رو کاملا برطرف کنی


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام