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.

FlexboxResponsive Designgrid

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.

FlexboxResponsive Designadaptive layout

0 likes · 8 min read

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

KooFE Frontend Team

Feb 13, 2022 · Frontend Development

Mastering CSS clamp(): Simplify Responsive Design with Linear Scaling

This article explains how the CSS clamp() function can replace complex media queries by linearly scaling numeric properties such as font‑size, padding, or margin between defined minimum and maximum values, using viewport units for fluid, responsive designs while keeping code concise and maintainable.

FrontendResponsive Designclamp

0 likes · 7 min read

Mastering CSS clamp(): Simplify Responsive Design with Linear Scaling

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.

FrontendResponsive DesignSSR

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.

FrontendJavaScriptcss

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.

FrontendResponsive DesignViewport Units

0 likes · 9 min read

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

Tencent IMWeb Frontend Team

Jul 4, 2016 · Frontend Development

Mastering Responsive Web Design: From Layout to Code

This article explains how to design and implement a fully responsive web page by planning the layout, structuring HTML, applying CSS techniques like flexbox and media queries, and enhancing interactivity with JavaScript, while sharing practical code examples and best‑practice tips.

FrontendHTMLJavaScript

0 likes · 10 min read

Mastering Responsive Web Design: From Layout to Code

Tencent IMWeb Frontend Team

Jun 24, 2016 · Frontend Development

Master Responsive Design: How to Set Breakpoints for Every Device

This guide explains why responsive design matters, defines breakpoints, shows how to set the viewport and media queries, and offers practical rules and examples for planning breakpoints across phones, tablets, and various desktop screens.

FrontendResponsive DesignWeb Development

0 likes · 11 min read

Master Responsive Design: How to Set Breakpoints for Every Device

Tencent IMWeb Frontend Team

May 26, 2016 · Mobile Development

Choosing px, %, or rem for Mobile Layouts: When and Why?

This article examines how to choose between px, %, and rem units for mobile web layouts, discussing width and height uncertainties, the role of media queries, and practical recommendations for using each unit effectively across various screen sizes.

Responsive Designmedia queriesmobile

0 likes · 6 min read

Choosing px, %, or rem for Mobile Layouts: When and Why?

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.

FrontendResponsive DesignWeb Development

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.

FrontendResponsive DesignWeb Development

0 likes · 11 min read

Current State and Future Trends of Responsive Web Design