ขอถามเรื่องการทำงานของไฟล์ css min-width/max-width หน่อยครับ

[Nopzixcros]

พอดีผมจะทำเว็บให้มันรองรับ Responsive
แต่พอลองเทสด้วยหน้าจอขนาด 320px มันควรจะใช้ไฟล์ 320.css แต่มันกลับไปใช้ไฟล์ 400.css แทนอะครับ
ผมทำผิดตรงไหนช่วยแนะนำทีครับ ขอบคุณครับ



index.html

โค้ด เลือก ขยาย

<link rel='stylesheet' href='style.css' type='text/css' media='all' />
<div class="container">
</div>

style.css

โค้ด เลือก ขยาย

@import url("main.css");
@import url("320.css");
@import url("400.css");

main.css

โค้ด เลือก ขยาย

.container
{
    margin: 0 auto;
    position: relative;
    width: 1000px;
}

320.css

โค้ด เลือก ขยาย

@media screen and (max-width: 479px) { /* target= mobile 480 wide */
.container
{
margin: 0 auto;
position: relative;
width: 320px;
}
}

400.css

โค้ด เลือก ขยาย

@media screen and (max-width: 768px) { /* target= mobile 480 wide */
.container
{
margin: 0 auto;
position: relative;
width: 460px;
}
}

[ฟาร์มเฮ้า]

ก็หน้าจอ 320px มันเข้าเงื่อนไขทั้ง 2 ไฟล์ import ไฟล์ไหนอยู่ล่างมันก็ใช้ไฟล์นั้นครับ

ถ้าอยากเขียนให้ครอบคลุม ต้องเขียน max-width 768px คู่กับ min-width 480px

แต่เอะ แค่ชื่อไฟล์ กับค่า max-width คุณก็เขียนขัดกันแล้วนะ

[wasantec]

ลองสลับตำแหน่งตามด้านล่างดูครับ

โค้ด เลือก ขยาย


@import url("main.css");
@import url("400.css");
@import url("320.css");


[BakKheab]

แบบนี้จะไม่ง่ายกว่าเหรอครับ

HTML

โค้ด เลือก ขยาย

<link rel='stylesheet' media='screen and (min-width: 480px)' href='css/480.css' />
<link rel='stylesheet' media='screen and (max-width: 479px)' href='css/320.css' />

320.css

โค้ด เลือก ขยาย

    .container{
         margin: 0 auto;
         position: relative;
         width: 320px;
    }

480.css

โค้ด เลือก ขยาย

    .container{
         margin: 0 auto;
         position: relative;
         width: 480px;
    }