移动端开发meta标签作用详解
程序员文章站
2022-03-02 10:27:36
关于响应式开发(其实作为一个还没有实际项目经验的我来说，写这篇博客显得有点自以为是的那种感觉，但是就我现在的理解我希望能对响应式开发做一个理解总结。个人认为响应式开发是web阶段一个难点。)响应式开发其实就是一个框架,多种设备，通过CSS媒体查询@meida检测不同宽度的设备从而对页面做出调整，......
meta标签详解
<meta name="viewport" content="width=device-width, initial-scale=1.0">
编译器快捷键： meta:vp + tab键
meta标签就是用来设置视口的标签,name是默认的,紧接着就可以设置其他的功能:
width： 设置宽度(device-width 是指当前设备的宽度)
height： 设置高度
initial-scale： 设置默认的缩放比例
user-scalable： 设置是否允许用户自行缩放(yes,no 1,0)
maximum-scale： 设置最大缩放比例
minimum-scale： 设置最小缩放比例
我们在做移动端开发时,首先需要搞懂物理像素与逻辑像素的关系
逻辑像素=物理像素 / (倍率*缩放比例)
倍率： 这个倍率是不可更改的,是屏幕设备固定的参数,
缩放比例： 这个缩放比例就是meta标签内的initial-scale
接下来举个栗子：
所以做移动端开发就是把页面宽度当成逻辑像素的宽度去做的。
针对于不同的逻辑像素宽度,我们需要用到rem,让页面内容与逻辑像素成固定比例，保证在不同的移动端设备都能有好的视觉比例。
html{ font-size: 100px; } span{ font-size: 0.16rem; }设置根元素的字体大小,其他的元素都根据rem设置对应的大小，针对于不同逻辑像素的设备,我们只需通过js改变根元素的字体大小就可以保证其他元素成比例的放大缩小。
function changeHtmlFontSize(){ var html = document.querySelector("html"); html.style.fontSize = window.innerWidth/(375/100)+'px'; }通过这样的设置,span标签在375逻辑像素的设备下字体大小为16px;在414逻辑像素的设备下字体大小为17.664px,这样就实现了根据不同逻辑像素的设备显示相同的比例。
本文地址：https://blog.csdn.net/weixin_42043532/article/details/107852141