接触响应式-css3-media判断屏幕分辨率
// IE6、7、8不支持css3 使用响应式一般用bootstrap框架(IE8使用时须引用Respond.js)而不用原生JS
外联式:
<link type="text/css" rel="stylesheet" href="css/link.css" media="only screen and (max-width:480px)" />
//只有480px以下时才引用link.css样式
内联式:
<style>
@media screen and (min-width: 480px){
body{background: red;}
}
</style>
//只有480px以下时才应用{}里的样式
//Bootstrap移动框架使用时必须设置meta标签:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
//然后引用bootstrap.css文件
<link rel="stylesheet" href="css/bootstrap.min.css">
//判断是否引用respond.js:
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/respong.js/1.3.0.respond.min.js"></script>
<![endif]-->
接触响应式-css3-media判断屏幕分辨率的更多相关文章
- 响应式页面-@media介绍
01 响应式页面-@media介绍, 我们为什么要写自适应的页面(响应式页面) 众所周知,电脑.平板.手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话 ...
- python 全栈开发,Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)
昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...
- css3 响应式布局 Media Query
1.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简单说就是一个网站能够兼容多个终端. 2.响应式布局的优缺点? 优点:面对不同分辨率设备灵活性强,快捷 ...
- 01 响应式页面-@media介绍,
我们为什么要写自适应的页面(响应式页面) 众所周知,电脑.平板.手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话,那可能就会乱的一塌糊涂,这时候怎么解决呢 ...
- 1 响应式页面-@media介绍,
我们为什么要写自适应的页面(响应式页面) 众所周知,电脑.平板.手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话,那可能就会乱的一塌糊涂,这时候怎么解决呢 ...
- js判断屏幕分辨率的代码
通过下面的代码判断分辨率 <script language="JavaScript"> <!-- Begin function redirectPage() { ...
- 响应式布局@media screen and ( max-width: 像素值 ) {}
设计思路很简单,首先先定义在标准浏览器下的固定宽度(假如标准浏览器的分辨率为1024px,那么我们设置宽为980px),然后用Media Query来监测浏览器的尺寸变化,当浏览器的分辨率小于1024 ...
- 移动WEB 响应式设计 @media总结
第一种: 在引用样式的时候添加 <link rel="stylesheet" media="mediatype and|not|only (media featur ...
- CSS3(@media)判断手机横竖屏
@media all and (orientation : landscape) { h2{color:red;}/*横屏时字体红色*/ } @media all and (orientation : ...
随机推荐
- Visual Studio 2017正式版离线安装及介绍
Visual Studio 2017 RTM正式版离线安装及介绍. 首先至官网下载:https://www.visualstudio.com/zh-hans/downloads/ VS 2017 正式 ...
- html细节积累-01
语义错误 块级元素可以包含内联元素和某些块级元素,内联元素不能包含块级元素,只能包含内联元素 页面可能正常解析,但不符合语义.浏览器自带容错机制,对于不规范的写法也能够正确解析,各浏览器的容错机制不同 ...
- 69个微信小程序常见问题
本文转自 遇到小程序方面的问题,该去哪里提问呢? 若是能得到微信官方的解答,想必是最叫人安心的.而微信也确实提供了这么一个地方. 在微信公众平台的开发者社区,就置顶了一个「小程序常见问题 FAQ」帖. ...
- 基于 Koa平台Node.js开发的KoaHub.js的模板引擎代码
koahub-handlebars koahub-handlebars koahub handlebars templates Installation $ npm install koahub-ha ...
- 使用Android Studio导入第三方库项目
在使用Android Studio开发时,用到了第三方库SlidingMenu(现在已经不推荐使用了),尽管如此,但具体怎么导入第三方库还是需要知道的,在查阅各种资料后,知道了一种比较容易可行的方法 ...
- 解决mac os下mcss命令报错:env: node\r: No such file or directory
标题无“转载”即原创文章,版权所有.转载请注明来源:http://besteam.im/blogs/article/31/. 我一直对字符界面有抵触感,即使会用vim,我的linux脚本(python ...
- python复习。知识点小记
1.对于单个字符的编码,Python提供了ord()函数获取字符的整数表示,chr()函数把编码转换为对应的字符: >>> ord('A') >>> ord('中' ...
- OSPF相关知识与实例配置【第一部分】
OSPF相关知识与实例配置[基本知识及多区域配置] OSPF(开放式最短路径优先协议)是一个基于链路状态的IGP,相比于RIP有无环路:收敛快:扩展性好等优点,也是现在用的最多的:所以这次实验就针对于 ...
- iOS 10 语音识别Speech Framework详解
最近做了一个项目,涉及到语音识别,使用的是iOS的speech Framework框架,在网上搜了很多资料,也看了很多博客,但介绍的不是很详细,正好项目做完,在这里给大家详解一下speech Fram ...
- 解决子元素用css float浮动后父级元素高度自适应高度
1.在最后一个子元素后面清除浮动 2.父元素加over-flow:hidden;(副作用:子元素定位不能超出父元素的范围) 3.父元素也一样浮动(最笨的方法): 4.子元素使用inline-block ...