@media screen and (min-width: 768px) and (max-width: 979px) {
}
ถ้ากำหนดแบบนี้จะเท่ากับว่า ให้จัดการหน้าเว็บตั้งแต่ความกว้างที่ 768 ถึง 979 ใช่มั้ยครับ
แต่ทำไมของผมมันจัดการแค่หน้าจอที่กว้าง 768 แค่นั้นอะครับ
กำลังงงอยู่ตอนนี้เหมือนต้องจัดตำแหน่งทุกขนาดหน้าจอที่มันเพี้ยนอะครับ
ละอีกอย่างครับ พอผมรีวิวเว็บบนมือถืออะครับเว็บด้านซ้ายมันติดขอบ แต่ทำไมด้านขวามันมีพื้นที่ ให้เลือน scrollbar อยู่นิดนึงอะครับ มันไม่พอดีทั้งหน้าจอซ้ายขวา
ตรง เมต้าแท็กผมกำหนด <meta name="viewport" content="width=device-width, initial-scale=1.0">
อย่างงี้อะ
media ก็ถูกต้องแล้วนะครับ
@media screen and (min-width: 768px) and (max-width: 979px) { ... }
- ลองตรวจสอบ code css ที่อยู่หลังบรรทัด media นะครับว่ามีตัวไหนไปทับกันหรือเปล่า ถ้าให้ดีต้องเอา media ไว้ล่าง style อื่นๆที่เขียนเสร็จแล้วทั้งหมดจะดีกว่าครับ
meta tag ถูกต้องแล้วครับ ถ้าใช้ชัวร์ใช้อันนี้ดีกว่าครับ
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- ลองดู element ที่มีขนาดเกิด div ที่ครอบอยู่ด้วยนะครับ บางทีอาจจะมีโดน padding, margin ไปเหลื่อมๆอยู่บ้าง อันนี้ inspect ดูแต่ละส่วนจะง่ายครับ
ดูโค้ดให้หน่อยได้มั้ยครับ หลังๆอาจจะกำหนดแปลกไปหน่อยนะครับเพราะหาวิธีแก้ไปก่อน
@media screen and (max-width:641px) {
.js .leftmenu{
display:none;
}
.js .slicknav_menu {
display:block;
}
.mainmenu{
margin-top:-17px !important;
}
.mainmenu ul li{
font-size:12.5px;
}
.mainmenu ul {
width:800px; margin-left:-41px;
}
.js .slicknav_menu {
display:block;
}
#navigation-block {left:-135px!important; }
.exhibition{
margin-left:5%;
}
.exhibition img{
margin-left:-5%;
}
.image0{
margin-left:5%;
}
.image3{
margin-left:5%;
}
.about1{
margin-left:8%;
}
.about2{
margin-left:0%;
}
.about3{
margin-left:8%;
}
.slide-image{
margin-top:9% !important;
}
.culture{ width:78%;
margin-left:8%;
}
.culture c{
padding-right:58%;
}
.iso img{
margin-left:35%;
}
}
@media screen and (min-width: 768px) and (max-width: 979px) {
.js .leftmenu{
display:none;
}
.js .slicknav_menu {
display:block;
}
.mainmenu{ margin-top:-17px !important;}
.mainmenu ul li{ font-size:15.8px; }
.mainmenu ul { width:800px; margin-left:-41px; }
.js .slicknav_menu {
display:block;
}
#navigation-block {
left:-135px!important;
}
.about1{
margin-left:8%;
}
.about3{
margin-left:8%;
}
.about2{
margin-left:7%;
}
.exhibition{
margin-left:5%;
}
.image0{
margin-left:14%;
}
.image3{
margin-left:14%;
}
.slide-image{
margin-top:7% !important;
}
.culture{ width:79%;
margin-left:8%;
}
.culture c{
padding-right:58%;
}
.iso img{
margin-left:38%;
}
}
@media screen and (min-width: 350px) and (max-width: 356px) {
.about1{ padding-top:5%;
}
.about2{
padding-top:5%;
}
.about3{
margin-left:0;
font-size:14.6px;
}
strong { font-size:13px;}
table.p th{ font-size:10.5px;}
.exhibition ul{
margin-left:5%;
}
.image0{
margin-left:1%;
padding-top:5%;
}
.image0 ul li { padding-top:10%;}
.image3{
margin-left:1%;
}
.culture{ width:74%;
margin-left:8%;
}
.culture c{
padding-right:10%;
}
.iso img{
margin-left:25%;
}
.fromemail{ margin-top:140%; margin-left:0%;}
}
@media screen and (min-width: 980px) and (max-width: 1017px) {
.slide-image{
margin-top:6% !important;
}
.mainmenu ul li
{
font-size:17px;
}
#navigation-block
{ margin-left:378% !important;
}
}
@media screen and (width:1016px){
.mainmenu ul li{
font-size:17.9px;
}
#navigation-block { margin-left:392% !important;
}
}
@media screen and (min-width: 1011px) and (max-width: 1017px) {
.mainmenu ul li{
font-size:17.6px;
}
#navigation-block { margin-left:389% !important;
}
}
@media screen and (width: 979px) {
.mainmenu ul li{ font-size:21px;
}
.mainmenu ul{ margin-left:-4.3%; width:1000px;
}
.slide-image{
margin-top:6% !important;
}
}
@media screen and (width: 978px) {
.mainmenu ul li{ font-size:21px;
}
.mainmenu ul{ margin-left:-4.3%; width:1000px;
}
.slide-image{
margin-top:6% !important;
}
}
@media screen and (width: 976px) {
.mainmenu ul li{ font-size:21px;
}
.mainmenu ul{ margin-left:-4.3%; width:1000px;
}
.slide-image{
margin-top:6% !important;
}
}
@media screen and (width: 977px) {
.mainmenu ul li{ font-size:21px;
}
.mainmenu ul{ margin-left:-4.3%; width:1000px;
}
.slide-image{
margin-top:6% !important;
}
}
@media screen and (width: 975px) {
.mainmenu ul li{ font-size:21px;
}
.mainmenu ul{ margin-left:-4.3%; width:1000px;
}
.slide-image{
margin-top:6% !important;
}
}
@media screen and (width: 974px) {
.mainmenu ul li{ font-size:21px;
}
.mainmenu ul{ margin-left:-4.3%; width:1000px;
}
.slide-image{
margin-top:6% !important;
}
}
@media screen and (width: 973px) {
.mainmenu ul li{ font-size:21px;
}
.mainmenu ul{ margin-left:-4.3%; width:1000px;
}
.slide-image{
margin-top:6% !important;
}
}
@media (max-width: 480px) {
}
@media (max-width: 767px) {
}
พัฒนาเว็บไซต์
