เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

@media not all and (min-resolution:.001dpcm) { 
    @media {
        ชื่อคลาส / ไอดี ที่จะกำหนด css  { 
            ค่าที่จ้องการกำหนด
        }
    }
}

@media not all and (min-resolution:.001dpcm) { 
    @media {
            .search-box .inputbox {
                height: 52px;
                font-size: large;
                line-height: 24px;
            }
            #page-header .search-box .inputbox {
                height: 53px;
            }
    }
}

การการจัดการทำการแสดงผลหน้า[url=https://www.mindphp.com/คู่มือ/73-คืออะไร/3585-website-เว็บไซต์.html]เว็บไซต์[/url]ให้สวยงามนั้น ก็จำเป็น ต้องใช้งานมีการออกแบบหน้าเว็บไซต์ให้มีความเหมาะสมกับเนื้อหารวมจะต้องรู้จักการใช้การจัดวาง [url=https://www.mindphp.com/คู่มือ/73-คืออะไร/2026-html-คืออะไร.html]html [/url]และ css ที่ดีด้วยซึ่งจะทำให้เว็บไซต์ที่พัฒนาขึ้นมามีความสวยงามน่าเขามาใช้งานมากขึ้น แต่ทั้งนี้ในบางครั้งแม้ว่าเราจะจัดรูปแบบ ไว้ดีแล้วแต่บางครั้งการที่จะนำไปเปิดบน บราวเซอร์ที่ต่างกันนั้นก็อาจจะทำให้ได้ผลลัพธ์ที่ได้ตรงตามที่ได้ทดสอบไว้ในครั้งแรก โดย ส่วนใหญ่นั้นผู้ที่พัฒนาออกหน้าเว็บไซต์นั้นจะใช้งาน บนเครื่อง windown และใช้งาน บราวเซอร์ chrome เป็นส่วนที่ใช้งานทดสอบ แต่ผู้ที่เชนำเว็บไซต์ไปใช้งานนั้นอาจจะนำไปเปิดที่ os หรือ บราวเซอร์เซอร์ที่แตกต่างกันไป ซึ่งเขาอาจจะจะพบข้อผิดพลากที่เราไม่ได้พบก็เป็นไปได้ โดยเฉพาะปัญหาที่เกิดขึ้นใน บราวเซอร์ safari โดยทั้งนี้จะมานำเสนอ วิธีการที่จะทำการระบุ [url=https://www.mindphp.com/คู่มือ/73-คืออะไร/2193-css-คืออะไร.html]css [/url]ที่จะใช้เฉพาะใน บราวเซอร์ safari เท่านั้นโดยวิธีการมีดังนี้

ตัวอย่างโคดที่ใช้เป็นส่วนกำหนดว่า ถ้าหากเป็น บราวเซอร์ safari จะเปลี่ยนมาใช้ css ในส่ววนี้

[code]
@media not all and (min-resolution:.001dpcm) {
@media {
ชื่อคลาส / ไอดี ที่จะกำหนด css {
ค่าที่จ้องการกำหนด
}
}
}
[/code]

ตัวอย่างการใช้งาน

[code]
@media not all and (min-resolution:.001dpcm) {
@media {
.search-box .inputbox {
height: 52px;
font-size: large;
line-height: 24px;
}
#page-header .search-box .inputbox {
height: 53px;
}
}
}
[/code]


[attachment=0]screenshot-app.lambdatest.com-2020.05.25-12_58_40.png[/attachment]


[b]บทตวามที่เกี่ยวข้อง[/b]

[url=https://www.mindphp.com/forums/viewtopic.php?p=180614#p180614]วิธีการทำ favorite icon เพื่อใช้สำหรับแสดงบน safari[/url]
[url=https://www.mindphp.com/forums/viewtopic.php?f=73&t=62327]หน่วยของค่าที่ใช้ต่างๆ ใน CSS[/url]
[url=https://www.mindphp.com/forums/viewtopic.php?f=73&t=62104]การใช้ box-shadow เพื่อสร้างเงาให้ กรอบกล่องข้อความ[/url]