พอดีผมจะทำเว็บให้มันรองรับ Responsive
แต่พอลองเทสด้วยหน้าจอขนาด 320px มันควรจะใช้ไฟล์ 320.css แต่มันกลับไปใช้ไฟล์ 400.css แทนอะครับ
ผมทำผิดตรงไหนช่วยแนะนำทีครับ ขอบคุณครับ
index.html
style.css
main.css
320.css
400.css
แต่พอลองเทสด้วยหน้าจอขนาด 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;
}
}
