接触响应式-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 : ...
随机推荐
- Selenium 使用过程遇到问题随笔
最近正在学习Selenium,自学是比较难的,也很感谢网络环境中,各位大大的博文帮助. 也希望在此能够记录一下从小白学习使用selenium测试的过程,也希望能对别人有所帮助. 关于环境部署,以及入门 ...
- Hibernate学习笔记①
---恢复内容开始--- 1.JavaEE的三层结构 WEB层--Service层--DAO层 2.Hibernate版本 Hibernate3.x 4.x 5.x 4版本是过渡版本 不使用 5 ...
- intent,实现两个活动之间数据的传递
一.Intent 可以启动一个活动,也可以在启动活动的时候传递数据.intent中提供了putExtra()方法,它可以把我们想要传递的数据暂存在intent中,启动了另一个活动后,通过getInte ...
- 使用Nginx+CppCMS构建高效Web应用服务器(之二)
使用Nginx+CppCMS构建高效Web应用服务器(之二) 上一篇 使用Nginx+CppCMS构建高效Web应用服务器(之一) 大致介绍了网站的整体架构,实际上通过调用REST获取数据并没有实现. ...
- iOS坐标转换失败?UIKit的屠神坑
使用UIKit的坐标转换方法convertxxx,千万要注意: 一个控件可以转换子控件上的某个点,到另外一个控件上 但是不能转换自己本身的点,到另外一个控件上,否则会数量加倍 所以,一个控件若想转换本 ...
- nginx浏览目录
[root@localhost domains]# vi web.jd.com location / proxy_set_header X-Forwarded-For $proxy_add_x_for ...
- 微服务--webapi实现,脱离iis,脱离tomcat
前言 微服务,顾名思义就是微小的单一的服务程序,单一流程,单一发布,开发和部署都可独立: 这是我的理解: 但基于web的服务,不管是webservice还是webapi等类似的服务都需要基于iis或者 ...
- 共通css初次尝试
1.网页的主要的html <@fn.html css=["${basePath}/css/help/guideCommon.css${versionControl}"]tit ...
- WebService返回数据前台获取并处理JSON的相关问题
起因: 记录这个问题的起因是一次解答网友的问题,当初自己初次接触webservice时也遇到过,但在写答案时,并没有很深的印象,只是知道webservice在后台返回值的时候,那里是有个坑的.网友问的 ...
- 反射实现 Data To Model
调用 : public ActionResult Index() { DataTable dt = new DataTable(); dt.Columns.Add("Name"); ...