css-媒体查询

lwx12525 发布于2019-08-30 15:55 / 1237人阅读

摘要：媒体查询标签像素比像素比物理像素设备独立像素像素通常的设计稿检测像素比设计稿设备宽度设置该设备下的根元素的文字大小改变窗口大小时也要重新计算一次比如由竖屏切换到横屏相对于根元素字体的单位是根据父元素字体移动端必须加的东西视口可视宽度物理

媒体查询

标签: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移动端

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

服务器托管云服务器媒体域名查询中文媒体域名查询英文媒体域名查询 tv媒体域名查询

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117305.html

详解css媒体查询

摘要：媒体查询，添加自，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。而且浏览器也不会根据媒体查询来动态的加载样式，它只是一股脑的将所有的样式引入。简介媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的. 简单的来讲媒体查询是一种用于修饰css何时起作用的语法. Media...

leone 2019-08-02 11:54 评论0 收藏0
详解css媒体查询

摘要：媒体查询，添加自，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。而且浏览器也不会根据媒体查询来动态的加载样式，它只是一股脑的将所有的样式引入。简介媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的. 简单的来讲媒体查询是一种用于修饰css何时起作用的语法. Media...

ymyang 2019-08-29 17:09 评论0 收藏0
详解css媒体查询

摘要：媒体查询，添加自，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。而且浏览器也不会根据媒体查询来动态的加载样式，它只是一股脑的将所有的样式引入。简介媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的. 简单的来讲媒体查询是一种用于修饰css何时起作用的语法. Media...

gotham 2019-08-23 12:42 评论0 收藏0
详解css媒体查询

摘要：媒体查询，添加自，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。而且浏览器也不会根据媒体查询来动态的加载样式，它只是一股脑的将所有的样式引入。简介媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的. 简单的来讲媒体查询是一种用于修饰css何时起作用的语法. Media...

genefy 2019-08-05 15:22 评论0 收藏0
css3 响应式媒体查询

摘要：让我们看一下使用媒体查询的更多示例。媒体查询是一种流行的技术，用于向不同的设备提供定制的样式表。让我们看一下使用媒体查询的更多示例。媒体查询是一种流行的技术，用于向不同的设备提供定制的样式表。为了演示一个简单的示例，我们可以更改不同设备的背景颜色 /* 将body的背景颜色设置为tan */ body { background-color: tan; } /* 在992px或更低...

李涛 2019-08-05 17:44 评论0 收藏0
css3 响应式媒体查询

摘要：让我们看一下使用媒体查询的更多示例。媒体查询是一种流行的技术，用于向不同的设备提供定制的样式表。让我们看一下使用媒体查询的更多示例。媒体查询是一种流行的技术，用于向不同的设备提供定制的样式表。为了演示一个简单的示例，我们可以更改不同设备的背景颜色 /* 将body的背景颜色设置为tan */ body { background-color: tan; } /* 在992px或更低...

Bowman_han 2019-08-30 15:44 评论0 收藏0