مشکل در رسپانسیو بودن سایت

سوال

سلام خدمت همه دوستان.

یک مشکل دارم در خصوص رسپانسیو کردن سایت.

قالب زیر رو طراحی کردم و وقتی که مرورگر رو ریسایز میکنم یه مقدار بهم ریخته میشه و اسکرول هم میخوره.

من نحوه رسپانسیو کردن رو از لینک زیر کپی کردم در حالی که یعضی از عناصر در جای درست قرار نمیگیرن در حالت رسپانسیو ولی تو مرورگر خوب اجرا میشه.

لینک دانلود پروژه: http://s5.picofile.com/file/8371053968/SITE.rar.html

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_media3

حل شد 0
, ۱۳۹۸/۶/۹ ۲۳:۱۰:۵۹ 2 پاسخ کاربر تازه 0

پاسخ ها ( 2 )

  1. احمد آخوندی
    1
    ۱۳۹۸/۶/۱۰ ۲۰:۲۵:۲۲
    پاسخ

    سلام

    برای ریسپانسیو کردن قالب، فریم ورک های css زیادی وجود داره که کار رو خیلی راحت میکنه.

    فریم ورک هایی نظیر BootStrap که محبوب ترین و بیشترین استفاده رو بین طراحان داره، اگر به سایتش مراجعه کنید، آموزش کامل و مثال های زیادی هم گفته شده:

    کدهای Css تون خیلی نامرتب بود، نتونستم چک کنم، ولی قطعه کد یک صفحه رو براتون میزارم، که شامل دو بخش چپ و راست هست، که میتونید جایگزین کدهای خودتون بکنید.

    ۱
    ۲
    ۳
    ۴
    ۵
    ۶
    ۷
    ۸
    ۹
    ۱۰
    ۱۱
    ۱۲
    ۱۳
    ۱۴
    ۱۵
    ۱۶
    ۱۷
    ۱۸
    ۱۹
    ۲۰
    ۲۱
    ۲۲
    ۲۳
    ۲۴
    ۲۵
    ۲۶
    ۲۷
    ۲۸
    ۲۹
    ۳۰
    ۳۱
    ۳۲
    ۳۳
    ۳۴
    ۳۵
    ۳۶
    ۳۷
    ۳۸
    ۳۹
    ۴۰
    ۴۱
    ۴۲
    ۴۳
    ۴۴
    ۴۵
    ۴۶
    ۴۷
    ۴۸
    ۴۹
    ۵۰
    ۵۱
    ۵۲
    ۵۳
    ۵۴
    ۵۵
    ۵۶
    ۵۷
    ۵۸
    ۵۹
    <!DOCTYPE html>
    <html>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <body>
     
    <style type="text/css">
    /*  SECTIONS  */
    .section {
    clear: both;
    padding: 0px;
    margin: 0px;
    }
     
    /*  COLUMN SETUP  */
    .col {
    display: block;
    float:left;
    margin: ۱% ۰ ۱% ۱.۶%;
    }
    .col:first-child { margin-left: ۰; }
     
    /*  GROUPING  */
    .group:before,
    .group:after { content:""; display:table; }
    .group:after { clear:both;}
    .group { zoom:۱; /* For IE 6/7 */ }
     
    /*  GRID OF TWO  */
    .span_2_of_2 {
    width: ۱۰۰%;
    }
    .span_1_of_2 {
    width: ۴۹.۲%;
    }
     
    /*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
     
    @media only screen and (max-width: 480px) {
    .col {
    margin: ۱% ۰ ۱% ۰%;
    }
    }
     
    @media only screen and (max-width: 480px) {
    .span_2_of_2, .span_1_of_2 { width: ۱۰۰%; }
    }
    </style>
     
    <div class="section group">
    <div class="col span_1_of_2">
    بپرسم
    </div>
    <div class="col span_1_of_2">
    beporsam.ir
    </div>
    </div>
     
    </body>
    </html>

    موفق باشید.

    بهترین پاسخ
  2. مهدی
    0
    ۱۳۹۸/۶/۱۰ ۲۳:۰۵:۱۸
    پاسخ

    خیلی ممنون از جوابتون.

    استفاده از bootstrap رو بلدم، ولی می خواستم با نوشتن این قالب در واقع یاد بگیرم چطور میشه سایت رو رسپانسیو کرد که اگر بعدا نشد مشکلی رو با bootstarp حل کرد بشه با استفاده از استایل دادن به صورت دستی اون مشکل رو حل کرد.

ارسال یک پاسخ