总共的方法:
1) 通过媒体查询的方式
2) 以天猫首页为代表的 flex 弹性布局
3) 以淘宝首页为代表的 rem+viewport 缩放
4)rem 方式
1. 基本知识点:
物理像素: 硬件上屏幕上横向和纵向有多少个像素点.
逻辑像素 dp: 程序认为屏幕上横向和纵向有多少个像素点.
设备像素比 (device pixel ratio): 设备像素比 (dpr) = 物理像素 / 设备独立像素
1px = (dpr) 的平方 * dp
2.Viewport(视口)
layout viewport 布局视口: 如果把移动设备上浏览器的可视区域设为 viewport 的话, 某些网站就会因为 viewport 太窄而显示错乱, 所以这些浏览器就决定默认情况下把 viewport 设为一个较宽的值, 比如 980px, 这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了. 把这个浏览器默认的 viewport 叫做 layout viewport.
document.documentElement.clientWidth/Height 返回布局视口的尺寸
visual viewport 视觉视口: 浏览器可视区域的大小. window.innerWidth/Height 返回视觉视口的尺寸
ideal viewport 理想视口: 完美适配移动设备的 viewport, 首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容; 第二, 显示的文字的大小是合适, 比如一段 14px 大小的文字, 不会因为在一个高密度像素的屏幕里显示得太小而无法看清, 理想的情况应该是无论是在何种密度屏幕, 何种分辨率下, 显示出来的大小都是差不多的. 不只是文字,
设置告诉浏览器使用它的理想视口:
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable =no">
3. 适配方案
一. 适配方案讲解
1) 视口要如下设置:
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
initial-scale ----- 初始的缩放比例
minimum-scale ----- 允许用户缩放到的最小比例
maximum-scale ----- 允许用户缩放到的最大比例
2) 先拿设计稿竖着的横向分辨率除以 100 得到 body 元素的宽度
如果设计稿基于 iphone6, 横向分辨率为 750,body 的 width 为 750 / 100 = 7.5rem
3) 通过以下代码设置 html 的 font-size:
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
5) 布局时, 设计图标注的尺寸除以 100 得到 CSS 中的尺寸
二, 单位讲解
px: 相对于显示器屏幕分辨率而言的.
em: 相对于父级字体大小
任意浏览器的默认字体高都是 16px. 所有未经调整的浏览器都符合: 1em=16px. 那么 12px=0.75em,10px=0.625em. 为了简化 font-size 的换算, 需要在 css 中的 body 选择器中声明 Font-size=62.5%, 这就使 em 值变为 16px*62.5%=10px, 这样 12px=1.2em, 10px=1em, 也就是说只需要将你的原来的 px 数值除以 10, 然后换上 em 作为单位就行了.
rem: 相对于根元素的字体大小 (html)
vh: 等于 viewport 高度的 1/100. 例如, 如果浏览器的高是 900px,1vh 求得的值为 9px.
vw: 如果显示窗口宽度为 750px,1vw 求得的值为 7.5px.
二.通过媒体查询
它主要是通过查询设备的宽度来执行不同的 css 代码, 最终达到界面的配置.
1媒体查询的引入
1) 在屏幕最大是 600px 的时候加载 "smallscreen.css"
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css" />
2) 也就是在特定屏幕下加载 style.css
- <style type="text/css" media="screen and (max-width: 600px)">
- @import url("css/style.css");
- </style>
- 3)
- @media screen and (max-width: 600px) {
选择器 {
属性: 属性值;
}
}
width ---- viewport 的宽度 (width=device-width 意思是: 宽度等于设备宽度)
initial-scale ----- 初始的缩放比例
minimum-scale ----- 允许用户缩放到的最小比例
maximum-scale ----- 允许用户缩放到的最大比例
user-scalable ----- 用户是否可以手动缩放
2缺点:
1) 代码量比较大, 维护不方便
2) 为了兼顾大屏幕或高清设备, 会造成其他设备资源浪费, 特别是加载图片资源
3) 为了兼顾移动端和 PC 端各自响应式的展示效果, 难免会损失各自特有的交互方式
来源: https://www.2cto.com/kf/201807/761954.html