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

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
« หน้าที่แล้ว ต่อไป »
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: สอบถาม การเขียน reponsive web  (อ่าน 813 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
webbaby
สมุนแก๊งเสียว
*

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

กระทู้: 844



ดูรายละเอียด เว็บไซต์
« เมื่อ: 25 เมษายน 2015, 17:06:04 »
 คือกำลังแก้เว็บให้ เป็น responsive ศึกษาอ่านในเน็ตอยู่ครับ พอเข้าใจตรงที่กำหนด css ให้แต่ละขนาดหน้าจอ

ที่สงสัยคือ แล้วกำหนด code ตรงไหนให้ มันแสดงผลบ้าง ไม่แสดงผลบ้าง

 เช่น  banner หรือ navigation bar ไม่ต้องแสดง เมื่อหน้าจอขนาดที่เราไม่ต้องการให้แสดง
« แก้ไขครั้งสุดท้าย: 25 เมษายน 2015, 17:06:24 โดย webbaby » บันทึกการเข้า
sputtaro
สมุนแก๊งเสียว
*

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

กระทู้: 910



ดูรายละเอียด
« ตอบ #1 เมื่อ: 25 เมษายน 2015, 17:18:28 »
@media screen and (max-width: 320px) {
   
    .breadcrumbs{display:none;}
}
@media screen and (max-width: 360px) {
   
    .breadcrumbs{padding-top:40px;margin-top: 0px;margin-bottom: 10px;}
}
ข้างบนคือตัวอย่างจากผม

ข้างล่าง คือตัวอย่าง การใช้งาน display จากเว็บ w3schools.com

http://www.w3schools.com/css/css_display_visibility.asp
« แก้ไขครั้งสุดท้าย: 25 เมษายน 2015, 17:19:40 โดย sputtaro » บันทึกการเข้า
smapan
Global Moderator
เจ้าพ่อบอร์ดเสียว
*****

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

กระทู้: 8,272



ดูรายละเอียด เว็บไซต์
« ตอบ #2 เมื่อ: 25 เมษายน 2015, 17:36:20 »
กำหนดใน css ครับ
บันทึกการเข้า
จูมล่าโฮส สยามโฮสเว็บ modty.com
รวมที่พัก เช่ารายวัน ที่พักเช่ารายเดือนมากที่สุดแจ่มจริง
***Tel 083-757-1515 ติดปัญหา Joomla ตรงไหนรับปรึกษาฟรี โทรมาเถอะครับ ถ้าตอบได้ช่วยแน่นอน ไม่มีกั้ก. ***
ieiq
หัวหน้าแก๊งเสียว
*

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

กระทู้: 1,773



ดูรายละเอียด
« ตอบ #3 เมื่อ: 25 เมษายน 2015, 17:50:53 »
อ้างจาก: sputtaro ที่ 25 เมษายน 2015, 17:18:28
@media screen and (max-width: 320px) {
   
    .breadcrumbs{display:none;}
}
@media screen and (max-width: 360px) {
   
    .breadcrumbs{padding-top:40px;margin-top: 0px;margin-bottom: 10px;}
}
ข้างบนคือตัวอย่างจากผม

ข้างล่าง คือตัวอย่าง การใช้งาน display จากเว็บ w3schools.com

http://www.w3schools.com/css/css_display_visibility.asp


Max, Min ครับ
บันทึกการเข้า
ทำดีได้ดี เพราะทำด้วยใจ
MD.18
เจ้าพ่อบอร์ดเสียว
*

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

กระทู้: 3,010



ดูรายละเอียด เว็บไซต์
« ตอบ #4 เมื่อ: 25 เมษายน 2015, 17:52:09 »
display:none

 Tongue ใช่ที่หาหรือป่าว
บันทึกการเข้า
ติดต่อทางเมล์ service.md18@gmail.com by ทวีศักดิ์  line : 0862600055

คิวงานว่าง !!
rukrean
สมุนแก๊งเสียว
*

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

กระทู้: 745



ดูรายละเอียด เว็บไซต์
« ตอบ #5 เมื่อ: 25 เมษายน 2015, 20:21:07 »
ก่อนอื่นต้องกำหนด viewport ไว้ภายใต้ head ก่อน


<head>
.........................
.........................
<meta name="viewport" content="width=device-width">
.........................
.........................
</head>

หลังจากนั้นก็ไปกำหดน media queries ใน css

ลองเอาของผมไปสังเกตดูแล้วกัน

http://supapchon.com/wp-conten...mes/blogazio/style.css?ver=4.2
บันทึกการเข้า

# Skill : HTML, CSS, Blogger, Wordpress, SEO, Writer #
- บัณฑิตชน - เรียนรู้ในสิ่งที่ไม่รู้
- โครงงานวิทยาศาสตร์ - Thai Sci Project (TSP)
Gunitrend
ก๊วนเสียว
*

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

กระทู้: 266



ดูรายละเอียด เว็บไซต์
« ตอบ #6 เมื่อ: 26 เมษายน 2015, 00:58:17 »
ตัวอย่างง่ายๆนะครับ http://codepen.io/mexprience/pen/yNyeJK
ใช้ display:none;

 Tongue
บันทึกการเข้า
นักสำรวจ ศึกษาตลอดเวลา เพื่อพัฒนาสิ่งที่ดียิ่งขึ้น
kiraoji
หัวหน้าแก๊งเสียว
*

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

กระทู้: 1,681



ดูรายละเอียด
« ตอบ #7 เมื่อ: 26 เมษายน 2015, 10:16:20 »
เรียนรู้หลักการใช้งาน media query   
แต่ท่านต้องมีพื้นฐาน css ระดับนึงก่อนครับ ถึงจะเริ่มเขึยน Responsive ได้

หรือ

เรียนรู้วิธีการใช้งาน bootstrap ครับมันจะมี guide line ในการใช้งาน Responsive และ จะทำให้ทำงานเร็วขึ้น
บันทึกการเข้า
Horseshoe77
Newbie
*

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

กระทู้: 47



ดูรายละเอียด
« ตอบ #8 เมื่อ: 26 เมษายน 2015, 11:18:50 »
https://www.udacity.com/course...web-design-fundamentals--ud893  

อันนี้เรียนฟรีครับ อาจารย์ที่คณะเอามาให้เรียน
เรียนจบปุ๊บทำเรสปอนซีพได้แน่นอนครับ ไม่เชื่อพี่อมขี้มาพ่นหน้าผมได้เลยครับ
เสียเวลาหน่อย แต่มีประโยชน์มากครับ 
บันทึกการเข้า
1ZAA
เจ้าพ่อบอร์ดเสียว
*

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

กระทู้: 3,531



ดูรายละเอียด เว็บไซต์
« ตอบ #9 เมื่อ: 26 เมษายน 2015, 12:00:50 »
เข้ามาแอบอ่านครับ ผมก็กำลังศึกษาเหมือนกัน
บันทึกการเข้า

อาเสี่ย ดอทคอม โลโก้ฮวงจุ้ย   โลโก้มงคล   Good Idea, Good Timing, Good Price, Good Connection.
หน้า: [1]   ขึ้นบน
พิมพ์
« หน้าที่แล้ว ต่อไป »
กระโดดไป: