• 技术文章 >web前端 >css教程

    怎么用CSS3媒体查询

    php中世界最好的语言php中世界最好的语言2017-11-24 11:58:08原创1019
    css3的媒体查询功能,使得响应式布局得以实现,其实基本原理还是用css3媒体查询(media/meta)功能查出设备的尺寸,然后写出不同的尺寸写出或者覆盖css样式,使得界面看起来变换了。接下来就和大家说一下怎么用CSS3媒体查询。

    esponsive Web Design

    将已有的开发技巧(弹性网格布局、弹性图片、媒体和媒体查询

    整合起来,命名为响应式网页设计

    是一种针对任意设备对网页内容进行“完美”布局的一种显示机制。

    简言之,是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

    优势

    多终端视觉和操作体验非常风格统一

    兼容当前及未来新设备

    响应式web设计中的大部分技术可以用在WebApp开发中

    节约了开发成本,维护成本也降低很多

    不足

    兼容性:低版本浏览器兼容性有问题

    移动带宽流量:相比较手机定制网站,流量稍大,

    但比较加载一个完整pc端网站显然是小得多

    代码累赘,会出现隐藏无用的元素,加载时间加长

    兼容各种设备工作量大

    移动优先

    在设计的初期就要考虑的页面如何在多终端显示

    渐进增强

    充分发挥硬件设备的最大功能

    适用什么?

    对于重内容的网站,例如形象展示,则比较适合使用响应式web设计

    不适用什么?

    对于重功能的网站,如电子商务类,则更推荐使用独立移动网站

    CSS3-media Query(媒体查询)

    javascript

    第三方开源框架

    Bootstrap

    常见的属性操作

    device-width/device-height 设备屏幕宽高

    width/height (渲染窗口宽度)实际显示宽度

    resolution 设备分辨率

    orientation 设备方向

    portrait/landscape 竖屏或横屏

    initial-scale 设定页面初始缩放比例(0-10.0)

    user-scalable 设定用户是否可以缩放(yes/no)

    minimum-scale 设定最小缩小比例(0-10.0)

    maximum-scale 设定最大放大比例(0-10.0)

    关于媒体查询的知识就这么多了,更多精彩请关注php中文网其它相关文章!

    相关阅读:

    CSS3的text-shadow字体阴影怎么使用

    怎么选择合适的HTML标签

    html里div居中需要注意哪些

    以上就是怎么用CSS3媒体查询的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:CSS3 样式表 css
    上一篇:css3的弹性盒怎么做出来 下一篇:CSS3有哪些新增的背景属性

    相关文章推荐

    • 深入浅析css中的层叠上下文• 十分钟教会你仅使用一个div配合css实现饼状图• 手把手教你CSS架构之SMACSS• 怎么用css样式把图片改为灰色• css怎么降低背景透明度

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网