<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vm-rem移动端布局的基本常识</title></head><body><!-- DPR：设备像素比 --><!-- 布局视图：默认宽度一般是980px --><!-- 视觉视图：眼睛看的到的视图，移动设置的布局视图：375px--iPhone 6/7/8 --><!-- name="viewport" content="width=device-width, initial-scale=1.0" --><!-- viewport,视觉窗口，width=device-width，页面的布局宽度device-width：视觉视图的宽度，设备宽度，二者相等 --><!-- device-width：375pxwidth = 980pxwidth赋值后就等于375px了当前的布局视图，就是当前移动设备浏览器的可视区宽度 --><!-- 1. 第一步实现：布局视图 = 视觉视图 --><!--2. 第二个小目标：理想视图 = 视觉视图initial-scale=1.0 这种1：1还原视觉视图的布局，叫理想视图 --><!-- ！目前 主流的 移动端布局方案：rem + vm --><!--/* iPhone 11 375pxvm:把屏幕分为100份100 vm = 100% = 375px *//* 之前浏览器默认字号 16px这个也是默认的rem的大小1 rem = 16 px *//* 为了计算方便，推荐将rem设置为100px例如一个元素 *//* 1 rem = 100 px;width = 50px = 0.5rem *//* 通常会给750px的宽度的设计稿，DPR = 2device-width = 750 px /DPR = 375px以后就直接以375px为宽度布局，理想视图来布局 */ --><style>html{/* font-size: 100px; */font-size: calc(100vw / 3.75);/* 1. 第一步：1rem =100 px */}body{/* 把字号还原回去浏览器默认的字号 16px *//* font-size: 16px; */font-size: .16rem;/* 2.第二步 1em = 16px */}</style><div class="box">hello world</div><style>/* 200px *50px */.box {width: 2rem;height: .5rem;border: 1px solid #000;background-color: lightgreen;box-sizing: border-box;}/* vw是当前屏幕宽度的百分比 *//* 1vw =1% *//* 当屏幕宽度小于320px的时候，字号不能再小了，否则就看不清了 */@media screen and (max-width:320px) {html{/* font-size: .85rem; */font-size: 85px;}}/* 当屏幕宽度大于640px,字体不能再大了 */@media screen and (min-width:640px) {html{/* font-size: .85rem; */font-size: 170px;}}</style></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
