@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月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
随机推荐
- 【iCore1S 双核心板_ARM】例程三:EXTI中断输入实验——读取ARM按键状态
实验原理: 按键的一端与STM32的GPIO(PB9)相连,且PB9外接一个1k大小的限流上接电阻. 初始化时把PB9设置成输入模式,当按键弹起时,PB9由于上拉电阻的作用呈高电平(3.3V): 当按 ...
- npm和yarn的使用对比
NPM YARN 说明 npm init yarn init 初始化某个项目 npm install/link yarn install/link 默认的安装依赖操作 npm install taco ...
- Java如何查找系统的代理设置?
在Java编程中,如何查找系统的代理设置? 以下示例显示如何使用HttpURLConnection类的systemSetting()方法和getResponse()方法的put方法在系统上查找代理设置 ...
- SQL-----------------------之ON和WHERE的区别
SQL中ON和WHERE的区别 数据库在通过连接两张或多张表来返回记录时,都会生成一张中间的临时表,然后再将这张临时表返回给用户.在使用left jion时,on和where条件的区别如下:1. on ...
- Git -- 搭建git服务器
在远程仓库一节中,我们讲了远程仓库实际上和本地仓库没啥不同,纯粹为了7x24小时开机并交换大家的修改. GitHub就是一个免费托管开源代码的远程仓库.但是对于某些视源代码如生命的商业公司来说,既不想 ...
- CentOS Nginx网站服务器搭建实例
Nginx是一款开源的高性能HTTP服务器和返向代理服务器. 下载.编译.安装模块: [root@localhost nginx-1.4.0]#wget http://nginx.org/ ...
- [Tensorflow] Practice - The Tensorflow Way
该系列主要是<Tensorflow 实战Google深度学习框架 >阅读笔记:有了Cookbook的热身后,以这本书作为基础形成个人知识体系. Ref: [Tensorflow] Cook ...
- ASP.NET MVC 4 (八) URL链接和Ajax帮助函数
使用帮助函数创建链接 MVC提供一些帮助函数创建链接,这些函数根据路径映射表自动调整生成的URL: 说明 示例 输出结果 应用程序相对URL Url.Content("~/Content/S ...
- Puppet报错汇总
报错1: 解决:该报错是由于Puppet agent 的时间和Puppet master的时间不一致导致,可以使用ntp同步一下时间即可解决 报错2: 启动mcollective的时候报错 解决:ge ...
- 跟bWAPP学WEB安全(PHP代码)--XPath注入
XML/Xpath注入 看了下,A2里面是认证与会话管理的破坏或称之为绕过,没有特别要写的,很多就是小问题,可能会将这类问题放在最后写一下.一篇博客,这里还是更多的着重在能够获取信息或者服务器权限的漏 ...