css-媒体查询

2024年4月1日 147次阅读 来源: LINLIN

媒体查询

标签:css
[TOC]

像素比

像素比 = 物理像素/设备独立像素(css像素)

window.devicePixelRatio

通常的设计稿pad

iphone5 640 320(css) 2/1

iphone 750 375

iphone 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.减小误差

    原文作者：LINLIN
    原文地址: https://segmentfault.com/a/1190000018036010
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞