


How to solve the height problem by adjusting the rem unit in adaptive design?
Apr 05, 2025 pm 11:03 PMAdaptive design: Cleverly solve the problem of height adjustment
In responsive design, precise control of page elements height is often a headache. Especially when the toolbar on the top of the browser takes up space, resulting in the actual visible height being less than the design draft height, how to ensure that the height of the page elements is consistent with the design draft has become a major challenge for developers.
Assume that the design draft size is 1920x1080 pixels, but the existence of the browser toolbar makes the actual visual height less than 1080 pixels. If you use rem units directly and set body
's font-size
according to the width of the design draft, the page layout is likely to be biased.
You may have tried the rem scheme based on width adaptation:
export const selfadapter = () => { let designWidth = 1920; // Design draft width let html = document.documentElement; let ww = html.clientWidth; // window width let rem = (ww * 100) / designWidth; html.style.fontSize = rem "px"; const resize = () => { let rem = (ww * 100) / designWidth; html.style.fontSize = rem "px"; }; window.addEventListener("resize", resize, false); };
This scheme calculates the rem value based on the window width, ignoring the height change. To address height differences caused by browser toolbar, a more effective strategy is to calculate the rem value based on window visual height.
The modified code is as follows:
export const selfadapter = () => { let designHeight = 1080; // Design draft height let html = document.documentElement; let wh = html.clientHeight; // window height let rem = (wh * 100) / designHeight; html.style.fontSize = rem "px"; const resize = () => { let rem = (wh * 100) / designHeight; html.style.fontSize = rem "px"; }; window.addEventListener("resize", resize, false); };
By using clientHeight
to obtain the visual height of the window and calculate the rem value based on the design draft height, the page height deviation caused by the browser toolbar can be effectively solved, ensuring that the height of the page element is consistent with the design draft, and avoiding UI misalignment. This enables 100px in the design draft to be converted to 1rem accurately in the browser.
The above is the detailed content of How to solve the height problem by adjusting the rem unit in adaptive design?. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

As the digital asset market gradually matures, Bitcoin, Ethereum and Dogecoin are called the "three giants in the currency circle", attracting the attention of a large number of investors. This article will analyze their technical basis, market position, community activity and long-term potential, so as to help users understand which one is more suitable for long-term holding.

As the market conditions pick up, more and more smart investors have begun to quietly increase their positions in the currency circle. Many people are wondering what makes them take decisively when most people wait and see? This article will analyze current trends through on-chain data to help readers understand the logic of smart funds, so as to better grasp the next round of potential wealth growth opportunities.

Bitcoin halving affects the price of currency through four aspects: enhancing scarcity, pushing up production costs, stimulating market psychological expectations and changing supply and demand relationships; 1. Enhanced scarcity: halving reduces the supply of new currency and increases the value of scarcity; 2. Increased production costs: miners' income decreases, and higher coin prices need to maintain operation; 3. Market psychological expectations: Bull market expectations are formed before halving, attracting capital inflows; 4. Change in supply and demand relationship: When demand is stable or growing, supply and demand push up prices.

?Many people are easily influenced by market sentiment in digital currency investment, blindly following the trend but not understanding the value of the currency itself. This article will compare and analyze the core mechanisms and values ??of the three mainstream currencies, Bitcoin, Ethereum, and Dogecoin, to help readers establish rational cognition and avoid being misled by short-term fluctuations.

In the virtual asset market, Bitcoin, Ethereum and Dogecoin are the three most common mainstream currencies, and many new retail investors are often confused when faced with these three. This article will compare and analyze technical characteristics, application scenarios, market performance, development ecology and community support, etc., to help investors understand the differences between these three currencies more clearly and make more appropriate choices.

There is no legal virtual currency platform in mainland China. 1. According to the notice issued by the People's Bank of China and other departments, all business activities related to virtual currency in the country are illegal; 2. Users should pay attention to the compliance and reliability of the platform, such as holding a mainstream national regulatory license, having a strong security technology and risk control system, an open and transparent operation history, a clear asset reserve certificate and a good market reputation; 3. The relationship between the user and the platform is between the service provider and the user, and based on the user agreement, it clarifies the rights and obligations of both parties, fee standards, risk warnings, account management and dispute resolution methods; 4. The platform mainly plays the role of a transaction matcher, asset custodian and information service provider, and does not assume investment responsibilities; 5. Be sure to read the user agreement carefully before using the platform to enhance yourself

Faced with the many mainstream digital assets on the market, many novice users often don’t know how to choose. Bitcoin, Ethereum and Dogecoin are three representative digital currencies, each with their own characteristics and suitable for the people. This article will help users clearly determine which currency is more suitable for their investment strategy based on currency characteristics, development potential and user comments.

The cryptocurrency market in 2025 is still full of opportunities, and choosing a suitable app is the first step to success. Before making a decision, it is recommended that users comprehensively consider their trading experience, product types of interest, and preferences for functional complexity. Most importantly, no matter which platform you choose, asset security should be put first and always maintain a learning mindset to adapt to this rapidly changing market.
