响应式布局及bootstrap(实例)
Chrome Firefox Internet Explorer Opera Safari Android 支持 支持 N/A 不支持 N/A iOS 支持 N/A 不支持 支持 Mac OS X 支持 支持 支持 支持 Windows 支持 支持 支持 支持 不支持
响应式布局实例
响应式页面实例地址
chrome18 | firefox11(firefox3.6) | IE7(较少用户) | IE8(主流) | IE9(代表最新版本) | IE6 | |
实例1-微博 | 无 | 无(无圆角) | 无 | 无 | 无 | 崩溃 |
实例2-相册 | 圆角错误 | 无圆角(无圆角,不支持背景尺寸属性) | 无 | 无 | 无 | 崩溃 |
实例3-博客 | 圆角错误 | 无圆角, 进度条无动画(无圆角,进度条无动画) | 无 | 无 | 无 | 崩溃 |
其它 |
chrome18和firefox都是旧版本的,用户非常少不支持背景属性可以用position和z-index属性解决IE6崩溃可以使用针对Bootstrap的插件Bsie解决大部分,但如果不要求对IE6支持,不建议使用,影响性能下图分别是无圆角,正常圆角,圆角错误,圆角是CSS3属性,所以会出现兼容问题,但IE7以上都支持,已经很好了(w3school说IE9以上才支持,说明使用了css hack)且官方文档里说明说明了这一点:http://v3.bootcss.com/css/#images-shapes
1. *~768手机,1栏2. 768~992平板,2栏3. 992~1200普通PC,2栏4. 1200~*大屏幕PC,3栏
分辨率dpi | ppi | 型号 | 竖 | 横 |
2560x1536(手机) | 546 | MX4 pro | 1栏 | 1栏 |
720x1280(手机) | 华为荣耀3c | 1栏 | 1栏 | |
1200x1920(手机平板) | 华为 x1 7.0 | 1栏 | 2栏 | |
800x1280(平板) | toshiba wt8a(win 8.1系统) | 2栏 | 3栏 | |
1366x768 | Acer win8.1 | - | - |
响应式布局及bootstrap(实例)的更多相关文章
- 响应式布局与bootstrap框架
原文 网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽 ...
- 响应式布局之BootStrap
本文在于巩固基础 学习bootStrap官网http://getbootstrap.com/ 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多 ...
- 响应式布局和BootStrap 全局CSS样式
1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...
- 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2
1.表格 <div class="container"> <table class="table "> <thead> &l ...
- 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1
1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...
- 16、响应式布局和BootStrap 全局CSS样式知识点总结-part3
1.响应式工具 ①可用的类 <div class="container"> <a href="#" class="visible-x ...
- web前端学习(二)html学习笔记部分(9)-- 响应式布局
1.2.23 响应式布局基础 1.2.23.1 响应式布局介绍 1.响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多终端 -- 而不是为每个终端做一个特定的版本.这个概 ...
- 前端入门24-响应式布局(BootStrap)
声明 本篇内容摘抄自以下两个来源: BootStrap中文网 感谢大佬们的分享. 正文-响应式布局(BootStrap) 这次想来讲讲一个前端开发框架:BootStrap BootStrap 目前已经 ...
- asp.net MVC通用权限管理系统-响应式布局-源码
一.Angel工作室简单通用权限系统简介 AngelRM(Asp.net MVC Web api)是基于asp.net(C#)MVC+前端bootstrap+ztree+lodash+jquery技术 ...
随机推荐
- matlab调用keras深度学习模型(环境搭建)
matlab没有直接调用tensorflow模型的接口,但是有调用keras模型的接口,而keras又是tensorflow的高级封装版本,所以就研究一下这个……可以将model-based方法和le ...
- 图解nginx配置文件nginx.conf
1. 一个server表示一个虚拟主机, 说白了就是网站, 一个nginx可以有多个server 2. listen网站监听的端口 3. server_name网站的域名 4. root是网站的相对目 ...
- Django项目:CRM(客户关系管理系统)--66--56PerfectCRM实现CRM客户报名缴费链接
# kingadmin.py # ————————04PerfectCRM实现King_admin注册功能———————— from crm import models #print("ki ...
- iType.js仿输入文字效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Extjs 疑难杂症 (LoadMark 遮罩、Panel Update无效、chrome浏览器date控件全屏)
一.在extjs gridPanel中使用LoadMark无效,三步搞定. 原代码: grid = new Ext.grid.GridPanel({ store: store, title:'资料列表 ...
- 爬虫(三)通过Selenium + Headless Chrome爬取动态网页
一.Selenium Selenium是一个用于Web应用程序测试的工具,它可以在各种浏览器中运行,包括Chrome,Safari,Firefox 等主流界面式浏览器. 我们可以直接用pip inst ...
- jmeter体系结构
jmeter体系结构 jmeter体系结构: 1.取样器.断言.监听器组合在一起就可以帮助我们完成发送请求.验证结果及记录结果三项工作 (1)取样器的访问路径:[测试计划]---[线程组] ...
- 嘴巴题3 「BZOJ1412」[ZJOI2009] 狼和羊的故事
「BZOJ1412」[ZJOI2009] 狼和羊的故事 Description "狼爱上羊啊爱的疯狂,谁让他们真爱了一场:狼爱上羊啊并不荒唐,他们说有爱就有方向......" Or ...
- Leetcode438.Find All Anagrams in a String找到字符串中所有字母异位词
给定一个字符串 s 和一个非空字符串 p,找到 s 中所有是 p 的字母异位词的子串,返回这些子串的起始索引. 字符串只包含小写英文字母,并且字符串 s 和 p 的长度都不超过 20100. 说明: ...
- 微服务开源生态报告 No.10
「微服务开源生态报告」,汇集各个开源项目近期的社区动态,帮助开发者们更高效的了解到各开源项目的最新进展. 社区动态包括,但不限于:版本发布.人员动态.项目动态和规划.培训和活动. 非常欢迎国内其他微服 ...