ตกลงไหมที่จะใช้ jQuery สำหรับการออกแบบเว็บที่ตอบสนองได้?

11

ฉันได้รับมอบหมายให้อัปเดตไซต์เพื่อให้ตอบสนองและปรากฏอย่างถูกต้องบนสมาร์ทโฟน น่าเสียดายที่เว็บไซต์ในรูปแบบปัจจุบันไม่ใช่เรื่องง่ายที่จะทำงานด้วย - ฉันไม่สามารถเปลี่ยน CSS ได้

ถือว่าเป็นการตรวจสอบขนาดเบราว์เซอร์ที่ไม่ดีและทำการเปลี่ยนแปลง CSS ด้วย jQuery หรือไม่

เช่น:

if ($(window).width() < 960) {
    //make heaps of CSS changes 
}

— MeltingDog
แหล่งที่มา

7

คุณควรพิจารณาใช้การสืบค้นสื่อแทนเนื่องจากเป็นมาตรฐานที่แนะนำโดย W3C ตั้งแต่เดือนมิถุนายน 2012

— Zistoloen

คุณหมายถึงการเปลี่ยนสไตล์ชีท? ฉันคิดอย่างนั้นเหมือนกัน แต่ฉันยังต้องเปลี่ยนองค์ประกอบมากมาย

— MeltingDog

ใช่. ฉันคิดว่าคุณจะมีการเปลี่ยนแปลง CSS เป็นจำนวนมาก

— Zistoloen

2

ประโยค "ฉันได้รับมอบหมายให้อัปเดตไซต์เพื่อให้ตอบสนอง" ไม่ควรตามด้วย "ฉันเปลี่ยน CSS ไม่ได้"

— Francisco Presencia

4

ทุกอย่างต้องการ jQuery มากกว่านี้ ( ข้อจำกัดความรับผิดชอบ: อย่าดำเนินการนี้อย่างจริงจัง )

— Darkhogg

13

แน่ใจ เห็นได้ชัดว่ามันจะดีกว่าถ้าใช้ CSS เพียงอย่างเดียว แต่ถ้าคุณทำไม่ได้ให้ใช้สิ่งที่คุณมี ทำได้มากเท่าที่คุณสามารถทำได้ด้วย CSS และใช้ JS ตามต้องการ ไม่แน่ใจว่าทำไมคุณไม่สามารถเปลี่ยน CSS ที่มีอยู่ แต่คุณสามารถเพิ่มสไตล์ชีตด้วย JS

(function() {
  //create a new element
  var newStyle = document.createElement("link");

  //set the required attribute for a valid css file
  newStyle.rel = "stylesheet";
  newStyle.href = "http://example.com/the/location/of/your/css/stylesheet.css";

  //and then append it to the <head>
  document.getElementsByTagName("head")[0].appendChild(newStyle);
})();

ที่มา: http://christian-fei.com/add-stylesheets-after-the-head-using-javascript/

จากนั้นไปใช้คำสั่ง CSS / media

หรือกับ jQuery:

$('head').append('<link rel="stylesheet" type="text/css" href="{url}">');

ฉันทำ 'สกิน' ที่ตอบสนองแล้วซึ่งบางสิ่งไม่สามารถทำได้โดยไม่ต้องเปลี่ยน DOM หากคุณไม่มีสิทธิ์เข้าถึง HTML บางครั้งการจัดการ JS DOM อาจเป็นคำตอบเดียว

แก้ไข:
ขึ้นอยู่กับความต้องการด้านภาพของหน้าจอขนาดเล็กของคุณคุณอาจประหลาดใจที่ข้อมูลโค้ด CSS นี้จะนำคุณไปสู่

/* hopefully the original CSS developer didn't include a bunch of !importants.*/
div, p, ul, table, img {
    float: none !important;
    max-width: 96% !important; /* breathing room on the sides */
    margin-left: auto
    margin-right: auto; 
}

หากนักพัฒนา CSS ดั้งเดิมชื่นชอบมากเกินไป!importantและคุณไม่สามารถเข้าถึง HTML คุณสามารถใช้ jQuery / JS เพื่อเพิ่ม ID ให้กับเนื้อหาหรือคอนเทนเนอร์ระดับสูงและเพิ่มไปยังตัวเลือกของคุณ

   #i-will-beat-you-important div,
   #i-will-beat-you-important p,
   #i-will-beat-you-important ul { 
        float: none !important; 
        ...
   }

— จะ
แหล่งที่มา

จากประสบการณ์การออกแบบที่ตอบสนองของฉันสามารถทำได้ด้วย css เท่านั้น ทันทีที่การออกแบบของคุณต้องมีการปรับตัวคุณอาจต้องใช้ Javascript บางตัว โปรดทราบว่าคุณต้องการให้ javascript ให้น้อยที่สุดเท่าที่จะทำได้

— Marco

4

ฉันจะบอกว่าลองใช้การสืบค้นสื่อก่อน วิธีการหนึ่งที่ฉันพบได้ง่ายขึ้นเมื่อจัดการกับการออกแบบที่ แต่เดิมสำหรับเดสก์ท็อปคือ:

เริ่มต้นด้วยสองสไตล์ที่แยกกัน หนึ่งรายการสำหรับการออกแบบที่ตอบสนองใหม่และอีกรุ่นสำหรับเดสก์ทอปรุ่นเก่า:

<link rel="stylesheet" media="screen and (max-width: 959px)" href="css/mobile.css">
<link rel="stylesheet" media="screen and (min-width: 960px)" href="css/desktop.css">

ทุกรูปแบบเก่าสามารถที่มีอยู่ในdesktop.css ในขณะเดียวกันคุณสามารถเริ่มต้นจากรอยขีดข่วนในmobile.css คุณอาจพบว่าคุณสามารถสร้างเค้าโครงคอลัมน์เดียวที่ดีใน CSS มือถือที่ใช้งานได้กับแท็บเล็ตเช่นกัน

วิธีการนี้ช่วยให้คุณเริ่มต้นใหม่และคุณสามารถจัดรูปแบบเฉพาะสำหรับโทรศัพท์มือถือและแท็บเล็ตเท่านั้นและไม่มีสไตล์เดสก์ท็อปที่ผ่านมาและเอาชนะสิ่งต่างๆ คุณสามารถซ่อน / แสดง / วางตำแหน่งองค์ประกอบตามต้องการสำหรับมือถือ

หากคุณจำเป็นต้องเปลี่ยนรหัสเดสก์ท็อปเพื่อให้สามารถทำงานกับมือถือและเดสก์ท็อปได้คุณสามารถสร้างมาร์กอัปใหม่ได้ หรือหากคุณพบว่าคุณไม่สามารถปรับโครงสร้าง HTML ให้เหมือนจริงได้ทั้งในเวอร์ชันที่ตอบสนองและอุปกรณ์พกพาคุณสามารถใส่คลาสบนเดสก์ท็อปโค้ดเช่นคลาส "เดสก์ท็อป" และใช้ CSS ในเวอร์ชันมือถือเพื่อซ่อน แล้วเขียนบาง HTML class="mobile"ใหม่สำหรับส่วนนั้นและให้มัน จากนั้นมันตามสไตล์ในmobile.cssและซ่อนไว้ในdesktop.css

— LightSpeeder
แหล่งที่มา

3

ฉันทำงานในไซต์ที่ใช้วิธีการนั้นและฉันมีปัญหากับการหมุนหน้าจอบนอุปกรณ์มือถือ เนื่องจากจาวาสคริปต์จะตรวจจับเพียงครั้งเดียวเมื่อโหลดหน้าเว็บหากผู้ใช้หมุนอุปกรณ์มันจะไม่ขยายจนเต็มความกว้างตามที่มันต้องการด้วยการสืบค้นสื่อ ตอนนี้มันง่ายกว่าสำหรับฉันที่จะเปลี่ยนไปใช้ CSS แต่บางทีผู้เชี่ยวชาญ JS อาจรู้ว่ามีวิธีตรวจสอบการเปลี่ยนแปลงความกว้างวิวพอร์ตหรือไม่ ดูเหมือนว่าควรจะมีวิธีการกับ AJAX แต่ฉันยินดีที่จะเดิมพันทุกสิ่งที่คุณพบว่าจะ overkill เท่าที่ประสิทธิภาพไปเช่น megasteve อธิบาย

— สเตฟานี
แหล่งที่มา

2

การตอบสนองและ "ปรากฏอย่างถูกต้องบนสมาร์ทโฟน" เป็นงานที่แตกต่างอย่างสิ้นเชิง

สันนิษฐานว่าการตอบสนองหมายถึงการกำจัด - ที่เป็นไปได้ - การเดินทางรอบพิเศษไปยังเซิร์ฟเวอร์ การตรวจสอบข้อผิดพลาด Ajax เพื่อดึงข้อมูลที่ร้องขอและการจัดการ DOM แบบไดนามิกเป็นงานที่มักจะปรับปรุงการตอบสนอง การใช้ JavaScript (หรือกรอบงาน JavaScript) เป็นวิธีที่มีประสิทธิภาพในการทำสิ่งนี้ ในช่วงไม่กี่ปีที่ผ่านมาฉันย้ายจาก JavaScript เป็น jQuery สำหรับการใช้งานเหล่านี้ ในหลายกรณี jQuery มีความเข้ากันได้ของเบราว์เซอร์ในตัวซึ่งมีข้อดีที่ชัดเจน ปลั๊กอินสำหรับ datepicker, การเติมข้อความอัตโนมัติและเมนูช่วยประหยัดเวลาในการพัฒนา

ไม่ควรเป็นแหล่งที่มาหลักของการจัดแต่งทรงผม นั่นคืองานของ CSS อย่างไรก็ตามทั้งสองสามารถใช้ร่วมกันได้อย่างมีประสิทธิภาพ ในตัวอย่างง่ายๆข้อความอาจมีสไตล์แตกต่างกันไปขึ้นอยู่กับผลลัพธ์ของการกระทำบางอย่าง jQuery สามารถใช้เพื่อเปลี่ยนคลาสที่กำหนด CSS

$('#result').removeClass('red').addClass('green');

การพยายามใช้หน้ามาตรฐานสำหรับมือถืออีกครั้งโดยเปลี่ยนสไตล์ในแบบไดนามิก ประสบการณ์ของฉันคือการให้ทางออกที่ไม่น่าพอใจ CSS ต่างกันอย่างสิ้นเชิงและจำเป็นต้องใช้สคริปต์ฝั่งไคลเอ็นต์ที่แตกต่างกันเพื่อใช้ประโยชน์จากคุณสมบัติมือถือ การตั้งค่าของฉันคือการสร้างหน้า HTML แยกต่างหากแทนที่จะเป็นหน้าเดียวที่ต้องใช้ตรรกะเพื่อเลือกสไตล์หรือฟังก์ชั่นที่จะใช้

— สเตฟานีเพอร์รี่
แหล่งที่มา

ผู้ถามกล่าวถึง "การออกแบบเว็บที่ตอบสนองต่อ" ( en.wikipedia.org/wiki/Responsive_web_design ) ซึ่งหมายถึงการออกแบบสำหรับขนาดหน้าจอและความสามารถที่แตกต่างกัน แม้ว่ามันจะไม่เฉพาะเจาะจงกับโทรศัพท์ แต่นี่เป็นปัจจัยสำคัญในการนำเทคนิคนี้ไปใช้ในระดับแนวหน้า

— Jacob Hume

1

เราเคยใช้เฟรมเวิร์ก css ที่เป็นที่นิยมกับ960.gsสำหรับเว็บไซต์ของเรา

เราต้องการให้มันตอบสนอง

มีคนสร้างปลั๊กอินตอบสนองแบบJS สำหรับ 960 gsดังนั้นเราจึงคิดว่าทำไมไม่ใช้เพียงเพราะเราไม่ต้องทำการเปลี่ยนแปลงใด ๆ กับเทมเพลตโครงสร้าง

มันใช้งานได้ดี แต่เบราว์เซอร์ส่วนใหญ่รวมถึงเบราว์เซอร์ที่ดีด้วย โดยทั่วไปคุณจะได้รับ 'แฟลชเนื้อหาที่ไม่มีสไตล์' ซึ่งอาจแตกต่างกันอย่างมากตามความซับซ้อนของหน้า

แม้จะมีโซลูชัน JS ที่ใช้งานได้ แต่ก็ไม่เหมาะ แต่การสืบค้นสื่อ CSS 3 เป็นตัวเลือกที่ดีที่สุดถ้าเป็นไปได้ ในที่สุดเราเพิ่งทำแม่แบบไซต์ของเราอีกครั้งโดยใช้Twitter Bootstrapซึ่งเหมาะสมกับความต้องการของเรามาก

ถึงแม้ว่ามันอาจจะเป็นการแอบอ้างที่จะตัดสั้น ๆ แต่ก็มักจะใช้เวลานาน / เจ็บปวดในระยะยาว

— megasteve4
แหล่งที่มา