media queries | BestHub

Rare Earth Juejin Tech Community

Dec 24, 2023 · Frontend Development

Screen Size Compatibility and Responsive Design in Front-End Development

This article explains the challenges of screen‑size compatibility for front‑end developers, analyzes current device resolutions and aspect ratios, and provides practical solutions such as viewport meta tags, media queries, adaptive units, responsive layouts, device simulation tools, and safe‑area handling for modern browsers and mobile devices.

Flexboxgridmedia queries

0 likes · 17 min read

Screen Size Compatibility and Responsive Design in Front-End Development

Rare Earth Juejin Tech Community

Sep 3, 2023 · Frontend Development

Front-End Layout Techniques: Adaptive, Responsive, and Common Layout Methods

This article explains front‑end layout concepts, distinguishing adaptive and responsive designs, lists common mobile screen dimensions, and details practical techniques such as percentage layouts, media queries, rem/vw/vh units, flexbox, as well as classic Holy Grail and double‑wing layouts.

Flexboxadaptive layoutlayout

0 likes · 8 min read

Front-End Layout Techniques: Adaptive, Responsive, and Common Layout Methods

Ctrip Technology

Nov 26, 2020 · Frontend Development

Responsive Design: Benefits, Challenges, and Practical Implementation at Ctrip

This article explains what responsive design is, outlines its advantages such as resource savings and SEO benefits, discusses the difficulties encountered with media queries in Ctrip's train‑ticket project, and presents concrete class‑based and server‑side solutions with code examples to improve maintainability and performance.

CSSSSRWeb Development

0 likes · 9 min read

Responsive Design: Benefits, Challenges, and Practical Implementation at Ctrip

JD Retail Technology

Jul 3, 2020 · Frontend Development

Implementing Dark Mode in H5: Strategies, Code Samples, and Compatibility

This article explains how to add dark mode support to H5 pages by using JavaScript to toggle CSS classes and CSS media queries, discusses system compatibility across platforms, provides practical code examples, and outlines additional media features for broader UI adaptations.

CSSJavaScriptdark mode

0 likes · 7 min read

Implementing Dark Mode in H5: Strategies, Code Samples, and Compatibility

JD Tech

Nov 1, 2018 · Frontend Development

Responsive Layout Techniques Using CSS Viewport Units, Media Queries, and JavaScript

This article explains how to achieve responsive design by calculating viewport heights for various desktop and mobile resolutions, using CSS viewport units (vh, vw) and rem together with media queries and JavaScript to dynamically switch scaling modes for consistent UI across devices.

CSSViewport Unitsfrontend

0 likes · 9 min read

Responsive Layout Techniques Using CSS Viewport Units, Media Queries, and JavaScript

Ctrip Technology

Jun 30, 2015 · Frontend Development

The Evolution of Responsive Design: Principles, Practices, and Implementation

This article explores the challenges of traditional responsive design across diverse mobile platforms, defines responsive design, outlines its advantages and pitfalls, and presents a comprehensive workflow—including product planning, UI/UX design, testing, development, and on‑demand resource loading—to achieve efficient, cross‑device web experiences.

PerformanceWeb Developmentfrontend

0 likes · 9 min read

The Evolution of Responsive Design: Principles, Practices, and Implementation

Qunar Tech Salon

Feb 9, 2015 · Frontend Development

Current State and Future Trends of Responsive Web Design

This article reviews the origins, widespread adoption, design patterns, and future challenges of responsive web design, explaining fluid grids, media queries, and scalable images while arguing for a content‑first approach and outlining obstacles such as responsive images, cross‑device interaction, performance, and workflow integration.

Web Developmentfluid gridsfrontend

0 likes · 11 min read

Current State and Future Trends of Responsive Web Design