美文网首页
响应式媒体查询

响应式媒体查询

作者: GarenWang | 来源:发表于2017-01-07 15:07 被阅读0次

    1.互联网公司的产品在PC端和在移动端一般都会有不同的样式,如何实现的?

    • 方案1,直接使用现成的bootstrap框架,自动的实现响应式页面,缺点无法满足自己的个性化需求和细节
    • 方案2, 为PC端和移动端单独写页面和样式,可以实现个性化需求,但是工作量增多,维护难度大
    • 方案3 ,使用模板系统,为PC和移动端单独写一个前端的页面模板,维护难度和代码量多少于方案2
    • 方案4,自己使用@midia实现一个轻量级和个性化的CSS框架,优势灵活性强,可复用性高,缺点自己写框架代码量大,费时长,可能与原有项目重复,造成浪费

    2.什么是媒体查询?写出语法和基本使用范例?

    • @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面

    • 浏览器支持,>=IE9,>=chrome 21,>=firfox 3.5 , >= safari 4.0,>=Opora9

    • css 语法

      @media *mediatype *and|not|only* (media feature)* {*    CSS-Code;*}
      <link rel="stylesheet" media="*mediatype* and|not|only (*media feature*)" href="*mystylesheet.css*">
      
    • 媒体的类型 mediatype
      1.all 用于所有设备
      2.print 用于打印
      3.screen 用于PC,Pad,Phone
      4.speech 用于屏幕阅读器等发声装备

    • 常用的media features
      1.width浏览器宽度
      2.height浏览器高度
      3.device-width设备屏幕分辨率的宽度值
      4.device-height设备屏幕分辨率的高度值
      5.orientation浏览器窗口的方向纵向还是横向,当窗口的高度值大于等于宽度时该特性值为portrait(竖向),否则为landscape(横向)
      6.aspect-ratio:比例值,浏览器的纵横比
      7.device-aspect-ratio:比例值,设备屏幕的纵横比

    • 代码实例

    相关文章

      网友评论

          本文标题:响应式媒体查询

          本文链接:https://www.haomeiwen.com/subject/yudfbttx.html