媒体查询
标签: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/desW*100
}
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.eot
inline-block 默认 4 个像素的间距解决方法 父元素加 font-size 为 0 设置 100 1. 方便计算 2. 减小误差