css-媒体查询

媒体查询标签:css[TOC]像素比像素比 = 物理像素/设备独立像素(css像素)window.devicePixelRatio通常的设计稿padiphone5 640 320(css) 2/1iphone 750 375iphone 1242 414//检测像素比 // 设计稿 var desW = 640; // 100px function refreshRem() { // 设备宽度(css) var winW = document.documentElement.clientWidth; document.documentElement.style.fontSize = 100/(desW/winW) + ‘px’;//设置该设备下的根元素html的文字大小 // x= winW/desW100 } refreshRem(); // 改变窗口大小时也要重新计算一次 比如由竖屏切换到横屏 window.addEventListener(‘resize’, refreshRem);rem（root-rm）相对于根元素字体的单位em是根据父元素字体移动端必须加的东西viewport视口 width可视宽度 device-width物理设备宽度 user-scalable是否允许用户缩放 默认值为no initial-scale 初始缩放比例默认1.0 maximum-scale允许用户缩放到最大比例默认1.0 minimum允许用户缩放到最小比例默认1.0移动端 <meta name=“viewport” content=“width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0”>eot IE 专用字体sug兼容手机端@font-face{ font-family: ‘YourWebFontName’; src: url(‘YourWebFontName.eot’); / IE9 Compat Modes / src: url(‘YourWebFontName.eot?#iefix’) format(’embedded-opentype’), / IE6-IE8 / url(‘YourWebFontName.woff’) format(‘woff’), / Modern Browsers / url(‘YourWebFontName.ttf’) format(’truetype’), / Safari, Android, iOS / url(‘YourWebFontName.svg#YourWebFontName’) format(‘svg’); / Legacy iOS */}https://mjs.sinaimg.cn/wap/online/home/v7/dest/css/fonts/SinaHomeFont.woff?v=0.0.14直接改点后面的后缀名就可以下载 svg输入网址之后 直接保存https://mjs.sinaimg.cn/wap/online/home/v7/dest/css/fonts/SinaHomeFont.eotinline-block默认4个像素的间距解决方法 父元素加font-size 为0设置100 1.方便计算2.减小误差