ขอเรียนถามเรื่อง responsive web หน่อยครับ ใช้ Bootstrap3
ใช้ class visible-xx ครับ
เช่น
visible-lg
visible-md
Date :
2014-09-02 17:26:37
By :
progamer2000
ที่บอกเพี้ยนนี่ยังไงครับ คือถ้าออกแบบตามโครงสร้าง Bootstrap จะไม่เพี้ยนนะครับ หากจะแก้ไข ก็จะต้องแก้ในส่วนของการแสดงผล ก็คือ CSS ซะส่วนใหญ่ ผมไม่ได้เก่งอะไรนะครับ อาจจะให้ข้อคิดเห็นได้ไม่มาก แต่ผมลองเล่นแล้ว มันก็โอเคนะ แต่ไม่ได้เล่นแบบจริงจัง เพราะคิดว่ามันเยอะ(ขี้เกียจ) ส่วนใหญ่จะไปโหลดธีมฟรีมาแก้เอมากว่า
ผมชอบใช้ Grid996 เอามาโมเอง มีแต่ CSS Base มาให้ นึกอะไรออกก็จับใส่ไป แล้วแต่ถนัดนะผมว่า
Date :
2014-09-02 17:28:36
By :
arm8957
น่าจะเข้าใจผิดแล้วล่ะครับ
ส่วนแสดงผล กำหนดขนาด responsive web ขึ้นอยู่กับ Class="col" ซึ่งการกำหนดจะแบ่งออกเป็น 4 ประเภท ได้แก่
Phones (<768px) = .col-xs-
Tablets (≥768px) = .col-sm-
Desktops (≥992px) = .col-md-
Desktops (≥1200px) = .col-lg-
โดยทุกบรรทัด Division (div) ต่อ 1 rows หรือ 1 แถว จำเป็นต้องนับด้วย 12 เพื่อการแสดงผลที่ถูกต้อง
ยกตัวอย่าง สำหรับ Phone และ Desktops Full HD
Code (PHP)
<style>
.bg{
background-color:#F00;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-lg-4 bg">Description</div> // xs แทน Phone , lg แทน Desktops Full HD
<div class="col-xs-8 col-lg-8 bg">Description</div> // xs แทน Phone , lg แทน Desktops Full HD
</div>
</div>
ลองดูครับ เพราะผมใช้ framework ตัวนี้ทำงานให้ลูกค้า ณ ปัจจุบันที่ update version ล่าสุด
ประวัติการแก้ไข 2014-09-02 17:32:16 2014-09-02 17:34:25 2014-09-02 17:36:53 2014-09-02 18:31:28
Date :
2014-09-02 17:29:53
By :
Ex-[S]i[L]e[N]t
ตอนเทสก็ กดย่อขยาย browser ในคอมเอาก็ได้ครับ มันก็แสดงผลเหมือนในมือถือนะแหละ
Date :
2014-09-02 17:30:36
By :
progamer2000
ครับผม ขอบคุณทุกความคิดเห็นครับ
ปัญหาของผม มี 2 จุดครับ คือ
1. ผมมีเมนูด้านบน เขียน Code แบบนี้ครับ
<nav class="navbar navbar-fixed-top navbar-inverse" >
เพื่อทำการ Fix เมนูด้านบน ไว้ ให้เลื่อตามหน้าจอ
** ปัญหา เวลาย่อขยายจอหรือแสดงบนมือถือ ผมไม่อยากให้มัน Fix ตาม เพราะมันบดบัง หน้าจอไปครึ่งหนึ่ง และบดบังรูปโลโก้ของผม
ปัญหานี้ถ้าไม่ให้แสดงในมือถือเลยทำได้ไหมครับ หรือมีวิธีอื่นแนะนำไหมครับ
2.ผมแทรกรูปเข้าไปใน Grid เวลาอยู่ ในจอคอม มันก็ปกติเพราะออแบบให้ขนาดพอดี
** แต่พอขยายจอหรือแสดงบนมือถือ ผรูปกับไม่ลดขนาดตามมาด้วย ควรแก้ตรงไหนดีครับ
ขอบคุณครับผม
Date :
2014-09-02 18:07:38
By :
the_cop
Load balance : Server 01