สร้างเค้าโครงแบบปรับตัวโดยไม่มีการสืบค้นของสื่อ

Sep 13, 2025

วิธีการ

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

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

สร้างบล็อกด้วยกริดและ Flexbox

วิธีดั้งเดิม

Adaptive layouts: breakpoints — เบรกพอยต์สามารถนำไปสู่ผลลัพธ์ที่ไม่พอใจสำหรับวิวพอร์ตที่ไม่ได้มาตรฐาน

อุปกรณ์พกพากำลังยึดครองโลก ความหลากหลายของอุปกรณ์ทุกชนิดกำลังเปลี่ยนวิธีที่เราสร้างเว็บไซต์ โดย 'เว็บไซต์ตอบสนอง' คนส่วนใหญ่คิดว่าเดสก์ท็อปและรุ่นมือถือเท่านั้น (บางครั้งเดสก์ท็อปแท็บเล็ตมือถือ) นี่คือวิธีการทำงานตามธรรมเนียม:

 H1 {
ขนาดตัวอักษร: 80px;
}
. container {
ความกว้าง: 980px;
ระยะขอบ: 0 อัตโนมัติ;
}

@Media (สูงสุดความกว้าง: 1023px) {
h1 {
ขนาดตัวอักษร: 48px;
}
. container {
ความกว้าง: อัตโนมัติ;
padding: 0 30px;
}
}

ในความเป็นจริงมักจะเป็น เค้าโครงเว็บไซต์ เราเห็นไม่ได้ทำสำหรับอุปกรณ์ของเรา ตัวอย่างเช่นเรามาดูกันว่าเราปรับขนาดตัวอักษร & lt; h1 & gt; หัวข้อ:

Adaptive layouts — ด้วยจุดพักเพียงครั้งเดียวคุณสามารถจบลงด้วยขนาดจุดที่ดูแปลก ๆ

คุณเห็นเรา & lt; h1 & gt; ชื่อเรื่องมี "ขนาดแบบอักษร: 48px" บนอุปกรณ์ความกว้าง 320px และ 800px และ "แบบอักษรขนาด: 80px" บน 1024px และ 2560px

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

Adaptive layouts: font size — คุณไม่สามารถสร้างจุดพักที่เพียงพอเพื่อให้ได้ขนาดตัวอักษรที่สมบูรณ์แบบในทุกหน้าจอ

สิ่งที่เราต้องการจริงๆคือ:

หน่วยวิวพอร์ต

Adaptive layouts: viewpoint units — Viewport หน่วยปรับปรุงเรื่อง แต่พวกเขายังต้องการงาน

การแก้ปัญหานี้เกี่ยวข้องกับหน่วยวิวพอร์ต VW และ VH เหล่านี้เป็นหน่วยความยาวที่แสดงถึง 1 / 100th ของความกว้าง / ความสูงของวิวพอร์ต (สนับสนุนอย่างกว้างขวางโดยเบราว์เซอร์จาก IE9 +)

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

 H1 {
ขนาดตัวอักษร: Calc ((80/1920) * 100VW;
}
. container {
ความกว้าง: 80VW;
ระยะขอบ: 0 อัตโนมัติ;
}

@Media (สูงสุดความกว้าง: 1023px) {
h1 {
ขนาดตัวอักษร: Calc ((48/375) * 100VW;
}
. container {
ความกว้าง: 90vw;
}
}

เราไม่เคยรู้เลยว่ามันใหญ่เกินไปหรือเล็กเกินไป

เราจะสร้างระบบเค้าโครงที่ปรับตัวได้อย่างไร เราจะออกแบบเว็บไซต์ที่ตอบสนองได้อย่างไรจาก 320px ถึง 2560px

เป็นการดีที่ Mockup ของคุณควรอธิบายตรรกะที่อยู่เบื้องหลังเค้าโครงและวิธีการที่ปรับจากความละเอียดที่เล็กกว่าให้ใหญ่ขึ้น:

การแก้ไขปัญหา

Adaptive layouts: solution — นี่คือวิธีการทำระบบเค้าโครงแบบปรับตัวได้อย่างแท้จริง

เราต้องการปรับคุณสมบัติจากหน้าจอเล็ก ๆ อย่างต่อเนื่องเป็นใหญ่ ไม่มีจุดพักและไม่มีการสืบค้นของสื่อ สิ่งที่เราต้องการคือหนึ่งค่าเดียวที่ใช้งานได้กับทุกการแสดงผล

ฟังก์ชั่นคณิตศาสตร์ที่มีสองตัวแปรเป็นกุญแจสำคัญ ตัวอย่างเช่นหากเราต้องการปรับขนาดตัวอักษรชื่อฟังก์ชันควรมีลักษณะดังนี้:

1920x + y = 80
375x + y = 48

2463 - ความกว้างของเดสก์ท็อปเริ่มต้นในการออกแบบจำลอง (เท่ากับ 100vw)
375 - ความกว้างมือถือเริ่มต้นในการออกแบบจำลอง (เท่ากับ 100vw)
80 - ขนาดตัวอักษรชื่อ H1 ที่ต้องการบนเดสก์ท็อป
48 - ขนาดตัวอักษรชื่อ H1 ที่ต้องการบนมือถือ

เหล่านี้คือค่า x และ y:

x = (80 - 48) / (1920 - 375)
x = 0.0207

Y = 80 - 1920 * 0.0207
y = 40.256

ในการใช้ค่าเหล่านี้เราจะต้องใช้ฟังก์ชัน Calc CSS เพื่อทำการคำนวณบนเว็บเพจ (สนับสนุนอย่างกว้างขวางโดยเบราว์เซอร์จาก IE9 +) เราควรนับ x * 100 ครั้ง (เนื่องจากหน่วย 1VW = 1 / 100th ของมุมมองวิวพอร์ต)

เราใช้ฟังก์ชั่นดั้งเดิมของเรา:
1920x + y = 80
375x + y = 48

แทนที่ 1920 ด้วย 100VW:
100VW * x + y = ค่าที่ต้องการ

แทนที่ x และ y ด้วยค่า:
100VW * 0.0207 + 40.256 = ค่าที่ต้องการ

เราได้รับสไตล์ CSS สุดท้าย:

 H1 {font-size: calc (2.07VW + 40.25PX)}

น่าแปลกใจที่พอแล้วที่ทำงานเพียงแค่ที่เราต้องการ!

แค่คุณสมบัติเดียวสำหรับการแสดงผลทั้งหมด ไม่จำเป็นต้องเขียนทับค่าอีกครั้งและอีกครั้ง คุณสามารถปรับและคำนวณคุณสมบัติทุกชนิด: ความกว้าง, ขนาดตัวอักษร, padding, ส่วนต่าง ฯลฯ

ลองสร้างเลย์เอาต์จริงโดยใช้เทคนิคนี้:

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

หากคุณกำลังเข้ารหัส HTML ทุกวันคุณอาจคุ้นเคยกับโปรเซสเซอร์ Pre-Sass / SCSS นี่คือความช่วยเหลือเล็กน้อยสำหรับคุณ: มาสร้าง "Mixin" กันเถอะและทำให้การคำนวณเหล่านี้เกิดขึ้นโดยอัตโนมัติและยังคงรักษาค่าดั้งเดิมของเรา

มันเป็นฟังก์ชั่นเดียวกันตามที่อธิบายไว้ข้างต้น แต่ทำเป็น sass mixin:

 $ display-wide: 1920
$ Display-Could: 375

@Mixin ของเหลว ($ คุณสมบัติ, $ minvalue, $ maxvalue)
  $ x: ($ maxvalue - $ minvalue) / ($ จอแสดงผลกว้าง - $ จอแสดงผลแคบ)
  $ Y: $ maxvalue - $ display-wide * $ x
  # {$ คุณสมบัติ}: calc (# {100 * $ x} vw + # {$ y} px)

h1
  @Include ของเหลว ('ขนาดตัวอักษร', 48,80)

.container
  @ รวมของเหลว ('ความกว้าง', 315,1580)
@Include ของเหลว ('padding', 30,60)

Adaptive layouts: mixin — Sass Mixin สามารถทำให้กระบวนการทั้งหมดง่ายขึ้น

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

บทความที่เกี่ยวข้อง:

17 บทช่วยสอนการออกแบบเว็บที่ตอบสนองที่มีประโยชน์จริงๆ
กฎการพิมพ์เว็บตอบสนอง
สร้างเค้าโครงที่ตอบสนองด้วยกริด CSS

สร้างเค้าโครงแบบปรับตัวโดยไม่มีการสืบค้นของสื่อ

วิธีดั้งเดิม

หน่วยวิวพอร์ต

การแก้ไขปัญหา

วิธีการ - บทความยอดนิยม

วิธีทำ meme ใน Photoshop

สร้าง UI ควบคุมด้วยเสียง

เริ่มต้นกับ Babel 7

วิธีการปรับใบหน้าสำหรับแอนิเมชั่น

สร้างข้อความ 3 มิติใน Photoshop: คู่มือทีละขั้นตอน

วิธีใช้ Adobe Capture CC

4 ขั้นตอนไปยัง VDM ที่ดีกว่ากับ zbrush

สร้างเอฟเฟกต์สแปลชใน Realflow

หมวดหมู่