移动端布局之—媒体查询及先响应式网站设计(总结)

媒体查询

概念

  • 可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式;
  • 使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果;
  • 媒体查询由媒体类型一个或多个检测媒体特性的条件表达式组成;
  • 媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。
  • 媒体查询写在CSS样式代码的最后,CSS是层叠样式表,在同一特殊性下,靠后的的样式会重叠前面的样式

例:

@media 设备类型 and (设备特征){
  div{ width:100px;height:100px;} 
}

怎么使用media?

(1) CSS 2 支持以下9种媒体类型——注意:媒体类型名区分大小写

  1. braille:触觉反馈设备
  2. embossed :盲文印刷设备
  3. handheld :小型或手持设备
  4. print :打印机
  5. projection :投影图像,如幻灯
  6. screen :计算机显示器
  7. speech :语音合成器
  8. tty :打字机
  9. tv :电视类
  10. all:所有

(2)Media所有参数汇总

  1. width:浏览器可视宽度。
  2. height:浏览器可视高度。
  3. device-width:设备屏幕的宽度。
  4. device-height:设备屏幕的高度。
  5. orientation:检测设备目前处于横向还是纵向状态。(landscape/portrait)
  6. aspect-ratio:检测浏览器可视宽度和高度的比例。(例如:aspect-ratio:16/9)
  7. device-aspect-ratio:检测设备的宽度和高度的比例。
  8. color:检测颜色的位数。(例如:min-color:32就会检测设备是否拥有32位颜色,向所有能显示颜色的设备应用样式表)
  9. color-index:检查设备颜色索引表中的颜色,他的值不能是负数。
  10. monochrome:检测单色楨缓冲区域中的每个像素的位数。(这个太高级,估计咱很少会用的到)
  11. resolution:检测屏幕或打印机的分辨率。(例如:min-resolution:300dpi或min-resolution:118dpcm)。
  12. grid:检测输出的设备是网格的还是位图设备,如果设备是基于网格的(例如电传打字机终端或只能显示一种字形的电话),该值为1,否则为0。

(3)使用media需要在html文档中添加以下代码,用来兼容移动设备的显示效果

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  • 是否允许屏幕缩放
  width=device-width:宽度等于当前设备的宽度 
  initial-scale=1:初始的缩放比例(默认为1) 
  maximum-scale=1:允许用户缩放到得最大比例(默认为1) 
  user-scalable=no:用户不能手动缩放
  • 手机等小屏幕手持设备
@media screen and (min-width: 320px) and (max-width: 480px) {}
  • 平板之类的宽度 1024 以下设备
 @media only screen and (min-width: 481px) and (max-width: 1024px) {}
  • PC客户端或大屏幕设备: 1024px 至更大
@media only screen and (min-width: 1025px) {}

移动端相关

meta标签设置

  1. HTML5页面窗口自动调整到设备宽度并禁止用户缩放页面
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  1. 忽略将页面中的数字识别为电话号码(iPhone会将看起来像电话号码的数字添加电话连接,应当关闭)
<meta name="format-detection" content="telephone=no" />
  1. 忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content= " email=no" />
  1. 通过快捷方式打开时全屏显示
<meta name="apple-mobile-web-app-capable" content="yes" />
  1. 隐藏状态栏
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

viewport

设置viewport

 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

每个属性对应的意思是:

  • width:设置layout viewport的宽度(正整数)
  • height:设置layout viewport的高度(正整数)
  • initial-scal:设置页面的初始缩放(数字(可带小数))
  • maximum-scale:允许用户的最大缩放值(数字(可带小数))
  • minimum-scale:允许用户的最小缩放值(数字(可带小数))
  • user-scalable:是否允许用户进行缩放

DPR

  • 设备像素比(device pixel ratio )简称dpr
  • 设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系。
    公式:
  • 设备像素比 = 物理像素 / 逻辑像素(px)
dpr > 1  高清屏
dpr = 1  普通屏
注:ppi和dpi都指屏幕像素密度,Android喜欢用dpi,IOS喜欢用ppi

rem、em

  1. px为单位
    使用“px”来设置文本比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,改变了浏览器的字体大小,这时会使用我们的Web页面布局被打破。因此,提出了使用“em”来定义Web页面的字体。
  2. em为单位
    使用 “px”为单位是比较方便,而又一致,但在浏览器中放大或缩放浏览页面时会存在一个问题,要解决这个问题,我们可以使用“em”单位。
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
  1. 但是“em”是相对于其父元素来设置字体大小,这样又会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小。而rem是相对于根元素< html>,所以我们只需要在根元素确定一个参考值(例:16px)。

媒体查询+rem

@media all and (max-width:320px){
  html{font-size:12px;}
}
@media all and (max-width:321px) and (max-width:375px){
  html{font-size:14px;}
}
@media all and (min-width:376px){
  html{font-size:16px;}
}

移动端屏幕尺寸

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

rem+js

<script>          
     window.onload = function(){
  var html = document.querySelector("html");
     html.style.fontSize = html.offsetWidth / 750 * 100 + "px";
      addEventListener("resize",function(){
               html.style.fontSize = html.offsetWidth / 750 * 100 + "px";
      },false);
}
</script>
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值