ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์Programmingถามเรื่อง responsives หน่อยครับ
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: ถามเรื่อง responsives หน่อยครับ  (อ่าน 917 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
kunnarakkup
สมุนแก๊งเสียว
*

พลังน้ำใจ: 3
ออฟไลน์ ออฟไลน์

กระทู้: 886



ดูรายละเอียด
« เมื่อ: 19 กันยายน 2014, 16:00:11 »

ผมเขียนเว็บบนหน้าจอคอมเสร็จแล้ว แล้วจะปรับ responsives ให้แสดงผลบนมือถืออะครับ ผมลองปรับแบบง่าบๆดูก่อนอย่างเช่น เปลี่ยนภาพพื้นหลัง เป็นสีแดง ในขนาดหน้าจอ xxx  แต่พอแสดงผลมันไม่เปลี่ยนอะครับ คือตัวภาพพื้นหลังผมกำหนดในcss ส่วนของ body อะครับ แต่พอผมลบตรง css แล้วไม่ใส่ภาพพื้นหลังตรง body ของ html ก็แสดงผลได้นะครับจากภาพพื้นหลังก็กลายเป็นสีแดง มันเกิดจากอะไรเหรอครับ หรือเป็นเพราะโครงสร้างเว็บที่ผมเขียนมันไม่ดีพอหรือเปล่า ช่วยหน่อยนะครับ

อันนี้ไฟล์หน้า index ครับ http://upload.siamza.com/1489213  
ส่วน responsives ผมก็เขียนประมาณแบบนี้อะครับ
@media screen and (max-width:641px) {
.mainmenu{ background-color:#666;}
}

เว็บนี้นะครับ ลืมไปว่าลงโฮสสำหรับเทสไว้
http://www.sqiwax.com/2/index.php
« แก้ไขครั้งสุดท้าย: 19 กันยายน 2014, 17:24:55 โดย kunnarakkup » บันทึกการเข้า
tittee
คนรักเสียว
*

พลังน้ำใจ: 12
ออฟไลน์ ออฟไลน์

กระทู้: 153



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 19 กันยายน 2014, 16:36:31 »

ตอนนี้เขียนยังไง อะครับ
บันทึกการเข้า

fangbif
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 283
ออฟไลน์ ออฟไลน์

กระทู้: 2,321



ดูรายละเอียด
« ตอบ #2 เมื่อ: 19 กันยายน 2014, 16:38:02 »

ลองศึกษาจาก webflow ดูค่ะ ลองทำในนั้นแล้ว export โค้ดออกมาศึกษาดู
บันทึกการเข้า
kunnarakkup
สมุนแก๊งเสียว
*

พลังน้ำใจ: 3
ออฟไลน์ ออฟไลน์

กระทู้: 886



ดูรายละเอียด
« ตอบ #3 เมื่อ: 19 กันยายน 2014, 17:00:03 »

ตอนนี้เขียนยังไง อะครับ

อันนี้ไฟล์หน้า index ครับ http://upload.siamza.com/1489213  
ส่วน responsives ผมก็เขียนประมาณแบบนี้อะครับ
@media screen and (max-width:641px) {
.mainmenu{ background-color:#666;}
}
บันทึกการเข้า
tittee
คนรักเสียว
*

พลังน้ำใจ: 12
ออฟไลน์ ออฟไลน์

กระทู้: 153



ดูรายละเอียด เว็บไซต์
« ตอบ #4 เมื่อ: 19 กันยายน 2014, 17:06:00 »

อย่างงี้ หันไปใช้ CSS Framwork เอาดีกว่าครับ

อย่าเขียนเองเลยครับ เสียเวลา

เอา Framwork มาแล้วโม css เพิ่มดีกว่าครับผม
บันทึกการเข้า

kunnarakkup
สมุนแก๊งเสียว
*

พลังน้ำใจ: 3
ออฟไลน์ ออฟไลน์

กระทู้: 886



ดูรายละเอียด
« ตอบ #5 เมื่อ: 19 กันยายน 2014, 17:16:10 »

อย่างงี้ หันไปใช้ CSS Framwork เอาดีกว่าครับ

อย่าเขียนเองเลยครับ เสียเวลา

เอา Framwork มาแล้วโม css เพิ่มดีกว่าครับผม

ทพยังไงอะครับผมทำไม่เป็น โม css เพิ่ม นี้คือเฉพาะ ปรับบนมือถือเหรอครับ ส่วน css ที่ผมเขียนไว้อยู่แล้วก็ไว้เหมือนเดิมใช่เปล่าอะ
บันทึกการเข้า
tittee
คนรักเสียว
*

พลังน้ำใจ: 12
ออฟไลน์ ออฟไลน์

กระทู้: 153



ดูรายละเอียด เว็บไซต์
« ตอบ #6 เมื่อ: 19 กันยายน 2014, 17:19:08 »

เอางี้ครับ ขอดุเว็บหน่อยครับ ผมจะได้บอกถูกว่าควรปรับไหม หรือทำ mobile site ไปเลย
บันทึกการเข้า

kunnarakkup
สมุนแก๊งเสียว
*

พลังน้ำใจ: 3
ออฟไลน์ ออฟไลน์

กระทู้: 886



ดูรายละเอียด
« ตอบ #7 เมื่อ: 19 กันยายน 2014, 17:25:48 »

เอางี้ครับ ขอดุเว็บหน่อยครับ ผมจะได้บอกถูกว่าควรปรับไหม หรือทำ mobile site ไปเลย

เว็บนี้ครับ
http://www.sqiwax.com/2/index.php
« แก้ไขครั้งสุดท้าย: 19 กันยายน 2014, 17:27:51 โดย kunnarakkup » บันทึกการเข้า
gam_55
Verified Seller
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 319
ออฟไลน์ ออฟไลน์

กระทู้: 1,203



ดูรายละเอียด
« ตอบ #8 เมื่อ: 19 กันยายน 2014, 17:47:44 »

ตอนนี้เห็นในไฟล์ http://www.sqiwax.com/2/css/responsives.css

เขียนแบบนี้
@media screen and (orientation:portrait) {
   
    .main {
       max-width:3000px;
        background:#1BA8E0;
    }
}

ลองปรับเป็นแบบนี้ได้ไหมคะ

@media screen and (max-width:641px) {
    .main {
        background:#1BA8E0;
    }
}
บันทึกการเข้า

kunnarakkup
สมุนแก๊งเสียว
*

พลังน้ำใจ: 3
ออฟไลน์ ออฟไลน์

กระทู้: 886



ดูรายละเอียด
« ตอบ #9 เมื่อ: 19 กันยายน 2014, 17:51:55 »

ตอนนี้เห็นในไฟล์ http://www.sqiwax.com/2/css/responsives.css

เขียนแบบนี้
@media screen and (orientation:portrait) {
   
    .main {
       max-width:3000px;
        background:#1BA8E0;
    }
}

ลองปรับเป็นแบบนี้ได้ไหมคะ

@media screen and (max-width:641px) {
    .main {
        background:#1BA8E0;
    }
}


แบบนี้เคยลองเขียนตอนแรกแล้วครับก็ไม่ได้เหมือนกัน
บันทึกการเข้า
gam_55
Verified Seller
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 319
ออฟไลน์ ออฟไลน์

กระทู้: 1,203



ดูรายละเอียด
« ตอบ #10 เมื่อ: 19 กันยายน 2014, 17:53:46 »

โค๊ด:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#test{
width: 500px;
height: 500px;
background-color: red;
}

@media only screen and (max-width : 640px){
#test{
background-color: green;
}
}
</style>
</head>
<body>

<div id="test"></div>
</body>
</html>

อันนี้ลองเขียนนะคะ
ถ้าจอใหญ่ div จะเป็นสีแดง
พอย่อจอจะเป็นสีเขียวค่ะ

ลองปรับใช้ดูนะคะ
บันทึกการเข้า

gooagolf
ก๊วนเสียว
*

พลังน้ำใจ: 18
ออฟไลน์ ออฟไลน์

กระทู้: 243



ดูรายละเอียด
« ตอบ #11 เมื่อ: 19 กันยายน 2014, 18:24:15 »

รอดูคำตอบด้วยคนครับ
« แก้ไขครั้งสุดท้าย: 19 กันยายน 2014, 18:49:24 โดย gooagolf » บันทึกการเข้า
VadiForte
สมุนแก๊งเสียว
*

พลังน้ำใจ: 125
ออฟไลน์ ออฟไลน์

กระทู้: 876



ดูรายละเอียด เว็บไซต์
« ตอบ #12 เมื่อ: 19 กันยายน 2014, 18:36:07 »

ผมเข้าไปดูแล้วนะครับ ได้ความตามนี้
1. จงจำไว้ว่า Responsive Design ถ้าเราไม่ได้เขียน @media screen ไว้ มันจะหมายความว่าเริ่มต้นจากขนาดมือถือ และใหญ่ขึ้นไป จะเหมือนกันหมด
2. คุณไปกดหนด body{} ให้เป็นภาพพื้นหลัง โดยไม่มี @media screen ไว้ หมายความว่า ไม่ว่าคุณจะอยู่ Screen ขนาดไหน ก็จะเจอภาพ BG นั้น
3. สิ่งที่คุณต้องการคือ อยากให้เปลี่ยนจากภาพพื้นหลัง เป็นภาพสีแดงในขนาดที่กำหนดไว้
4. แต่สิ่งที่คุณเขียนใน @media screen คุณไม่ได้ไปแก้ที่ body{} แต่คุณไปแก้ใน .main

พอเห็นภาพไหมครับ
บันทึกการเข้า

VadiForte
สมุนแก๊งเสียว
*

พลังน้ำใจ: 125
ออฟไลน์ ออฟไลน์

กระทู้: 876



ดูรายละเอียด เว็บไซต์
« ตอบ #13 เมื่อ: 19 กันยายน 2014, 18:42:18 »

แก้ไขครับ ผมกลับไปดูอีกที เข้าใจผิด

ลองใส่ important ต่อท้ายครับ

@media screen and (max-width:641px) {
    .main {
        background:#1BA8E0 !important;
    }
}
บันทึกการเข้า

ultrasad
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 58
ออฟไลน์ ออฟไลน์

กระทู้: 1,175



ดูรายละเอียด เว็บไซต์
« ตอบ #14 เมื่อ: 19 กันยายน 2014, 18:59:23 »

เอา

โค๊ด:
<link rel="stylesheet" href="css/responsives.css" type="text/css"> <!-- CSS ปรับให้ลองรับบนมือถือ-->

มาไว้ข้างล่าง

โค๊ด:
<link rel="stylesheet" href="css/main.css"type="text/css"> <!-- CSS หลักของหน้าเว็บไซต์ -->

 wanwan003

บันทึกการเข้า

ThaiseoBoard | รวมรักใดในภิภพจบโลกา แม้นเลิศหล้า ก็ไม่ถึงกึ่งมารดร | I am Redshirted

ทฤษฎีทาง SEO อาจต้องทำตัว Bold หรือ Underline แต่คำว่า "รัก" ไม่ต้องก็ได้ เพราะเธอคงรู้ว่ามันมีความหมาย และ สำคัญ.

ดาวน์โหลดโปรแกรมฟรี ทำเว็บให้คนใช้ ไม่ได้ทำไว้ให้บอทอ่าน Smiley
หน้า: [1]   ขึ้นบน
พิมพ์