美文网首页
响应式布局

响应式布局

作者: 104cbf61ed9c | 来源:发表于2016-11-24 21:27 被阅读16次

优点:解决设备的差异化显示

缺点:兼容性代码 工作量大 加载速度受影响; 对原有网站布局会产生影响用户判断未必精确;

响应式原则:

再设计初期就要考虑在多终端显示模式渐进增强;

充分发挥硬件最大功能

如何实现:

css-media query

借助原生javascript

第三方开源框架

css-media query

常见属性:

device-width,device-height 屏幕宽高

width,height 渲染窗口宽高

orientation 设备方向

resolution 设备分辨率

max-width     x<max-width

min-width       x>min-width

bootstrap

框架不仅可以帮助解决低端浏览器不支持css3的问题,同时解决了不同分辨率上网页布局的展示。

ie8需要引入respond.js(response.js必须部署在webserver域名下面,否则会出现跨域问题) ,使ie8支持medium query属性。

引入<meta name="viewport" content="width=device-width,initial-scale=1.0">

引入bootstrap.css(bootstrap.js依赖jQuery)

grid system 栅格系统 列布局

相关文章

  • 响应式布局目录

    └─Web响应式布局├─1 响应式布局介绍├─2 响应式布局实例(Media Queries模块) 上├─3 响应...

  • 九、HTML5响应式布局

    @(HTML5)[相应式布局] [TOC] 九、HTML5响应式布局 什么是响应式网页设计(布局) 响应式网页设计...

  • 响应式网页开发

    响应式布局 什么是响应式布局?可以让一个网站兼容不同分辨率设备的布局 为什么要使用响应式布局?给用户更好的视觉使用...

  • 响应式开发

    响应式布局 什么是响应式布局?可以让一个网站兼容不同分辨率设备的布局 为什么要使用响应式布局?给用户更好的视觉使用...

  • js基础(6)

    27、移动端响应式布局开发 响应式布局开发 1、什么是响应式布局开发?把我们开发完成的产品,能够让其适配不同的设备...

  • flex布局及常用属性

    flex 布局 demo 圣杯响应式布局

  • VUE响应式原理

    VUE响应式原理 这里的响应式(Reactive)不同于CSS布局的响应式(Responsive), 这里的响应式...

  • 响应式布局与自适应布局

    前言 这几天工作的时候被提出需要响应式布局的需求,但是响应式布局和自适应布局有嗲傻傻分不清楚。所以响应式布局和自适...

  • bootstrap系列之响应式布局及相关的visible-sm、

    响应式布局:响应式工具不能用于table元素,而且 本身就不支持 响应式布局需要在处添加如下语句: 在...

  • 响应式布局

    什么叫做响应式布局? 也即是响应式Web设计。响应式布局是Ethan Marcotte在2010年5月份提出的一个...

网友评论

      本文标题:响应式布局

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