@media screen and (max-width: 960px)与@media (max-width: 960px) 有screen与没有screen的区别
我们先来看下下面这段代码,估计很多人在响应式的网站CSS很经常看到类似下面的这段代码:
@media screen and (max-width: 960px){
body{
background: #000;
}
}
这个应该算是一个media的一个标准写法,上面这段CSS代码意思是:当页面小于960px的时候执行它下面的CSS.这个应该没有太大疑问。
应该有人会发现上面这段代码里面有个screen,他的意思是在告知设备在打印页面时使用衬线字体,在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时,你可以直接这样写:
@media (max-width: 960px){
body{
background: #000;
}
@media screen and (max-width: 960px)与@media (max-width: 960px) 有screen与没有screen的区别的更多相关文章
- [转载]利用@media screen实现网页布局的自适应,@media screen and
开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...
- 利用@media screen实现网页布局的自适应,@media screen and
开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...
- 优先级:content –> width –> flex-basis (limted by max|min-width)
原文: https://www.jianshu.com/p/17b1b445ecd4 -------------------------------------------- 最近在学习Flex Bo ...
- canvas里设置width和css里设置width和js里设置width的区别
canvas.width 和 它的style.width是不一样的: canvas是个画布,有他自己的宽和高(默认是没有单位的纯数字),就是canvas.width和canvas.height的宽和高 ...
- Math.min() Math.max() Math.min().apply() Math.max() .apply()该如何使用???
Math.min()和 Math.max() 语法: Math.min(x,y) Math.max(x,y) 虽然能取到最小值和最大值,但是不支持数组. 那么如何计算数组中的大小值呢???????? ...
- Azure Media Service (1) 使用OBS进行Azure Media Service直播
<Windows Azure Platform 系列文章目录> 今天正好有客户问如何使用OBS进行Azure Media Service直播,我这里简单介绍一下. 先决条件: 1. OBS ...
- 转:Canvas标签的width和height以及style.width和style.height的区别
转自:http://www.cnblogs.com/artwl/archive/2012/02/28/2372042.html 作者:Artwl 背景 今天在博问中看到一个问题:用canvas 的 l ...
- 利用@media screen实现网页布局的自适应
利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽 ...
- media screen 响应式布局(知识点)
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
随机推荐
- 带cookie跨域问题的思路以及echo的解决方案
问题起因 前后端分离,前端要访问后端资源,而且需要携带cookie信息,这时碰到了跨域问题.一开始以为设置为允许跨域allow_origins为即可.可是浏览器还是拦截的请求,于是查看跨域规则,原来跨 ...
- InstrumentDriver,对iOS自动化测试说 Yes!
InstrumentDriver 是 Mobile自动化小组最近实现的基于 instrument,针对 iOS 的自动化测试框架,目前支持 java 语言编写测试用例. 研究过iOS自动化测试的同学肯 ...
- Android应用图标微技巧,8.0系统中应用图标的适配
现在已经进入了2018年,Android 8.0系统也逐渐开始普及起来了.三星今年推出的最新旗舰机Galaxy S9已经搭载了Android 8.0系统,紧接着小米.华为.OV等国产手机厂商即将推出的 ...
- 【转】WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展
一.前言.预览 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要是对文本输入控件进行样式开发,及相关扩展功能开发,主要内容包括: 基本文 ...
- jdk 自带的数据库Derby使用
ij是derby自带的一个功能强大的数据库管理工具,可以进行很多数据库管理的操作,包括创建数据库, 启动/关闭数据库,执行SQL脚本等.完成准备工作后,就可以启动并使用ij工具了. 在cmd中输入如下 ...
- linux 几个命令
tail: tail -20 xxx --查看xxx文件的最后20行 more:分页查看,只能向后,不能向前 less:查看文件,可向前,向后,用的比较多 ll -h|more:当文件较多时,可以通 ...
- ASP.NET MVC文章系列
Summary of article list for ASP.NET MVC [Basic] Pro ASP.NET MVC chapter 2 http://www.cnblogs.com/yan ...
- 《手机端》让多出的导航变水平拖动,不让他 float 撑下去
/********** 网站底部 **************/ .nav{;;;;white-space: nowrap;overflow: auto;-webkit-overflow-scroll ...
- N!
求N! Problem Description Given an integer N(0 ≤ N ≤ 10000), your task is to calculate N! Input One N ...
- 这些简单实用的Word技巧,你get了吗
快速选中多个对象 如果需要将某些文本设置成相同的格式,我们不需要一个个的设置,只要选中多个文本然后一起设置就可以了. 单击开始——选择编辑——选择——选择格式相似的文本 快速清除所有格式 那么当我们不 ...