移动web——媒体查询
基本概念
响应式开发在没有媒体查询前，也可以通过js来实现，但是人们基本不会考虑，特别繁琐。在出现了媒体查询，才开始逐渐推广响应式。实际开发中，在时间与金钱充足的情况下还是别做响应式，影响性能，维护麻烦。
基本使用
1、屏幕大于等于480px，使用括号里的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@media screen and (min-width: 480px) {
body {
background-color: black;
}
}
</style>
</head>
<body> </body>
</html>
2、屏幕小于等于1000px，使用括号里的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@media screen and (max-width: 1000px) {
body {
background-color: black;
}
}
</style>
</head>
<body> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@media screen and (max-width: 1000px) {
.header{
display: none;
}
}
.header{
width: 100%;
height: 50px;
border: 1px solid #304115;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
</html>
移动web——媒体查询的更多相关文章
- ios web 媒体查询兼容
原文:https://blog.csdn.net/dear_zx/article/details/82785250 防止链接丢失,复制一下 兼容iphone4/4s: @media (device-h ...
- 移动WEB开发中媒体查询里的width, device-width, resolution
/*1.width: viewport的宽度,css像素,三星S3的viewort默认宽度是980px. 当设置viewport width=device-width时,对应的媒体查询中width的值 ...
- 响应式web之媒体查询（一）
HTML4和css2目前支持为不用的媒体类型设定专有的样式,如,一个页面在屏幕上时使用无衬线字体,而在打印时使用衬线字体.screen和print是两种已定义的媒体类型.媒体查询让样式表有更强的针对性 ...
- Web移动前端开发-——rem+less+媒体查询，rem+flexble.js+媒体查询
实际开发搞搞起来!!!! rem适配方案 媒体查询+rem+less 基础知识铺垫 第一步,我们需要拿到设计稿,安装设计稿的要求来设置一个合适的html字体大小. 第二步,计算元素大小的取值 页面re ...
- iPhone系列设备媒体查询：
这就引出一个问题,我们在对iPhone设备适配时候,又多出几种情况.iPhone系列设备媒体查询: @media only screen and (min-device-width: 320px){ ...
- css3新特性@media(媒体查询)
现在web页面运行的设备的屏幕从pc端到pad,从pad到手机,各种各样,这样就用到了现在经常用到的响应式页面,为实现响应式页面开发,就用到一个非常有用的css3属性media(媒体查询). 介绍:媒 ...
- 关于css3媒体查询和响应式布局
响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边 ...
- CSS：使用CSS媒体查询创建响应式布局
现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...
- css3 media媒体查询器用法总结
随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...
随机推荐
- C语言编程规范试题
C语言编程规范试题 [说明]: 1.本试题中不考虑头文件引用问题(假定已经包含正确的头文件),C语言的标准函数都可用: 2.如果不特别说明,假定程序运行环境为:操作系统Windows 2000, VC ...
- [poj2234]Matces Game_博弈论
Matches Game poj-2234 题目大意:n堆石子的Nim游戏,anti-SG. 注释:$1\le n\le 20$. 想法:用Colon定理即可.具体见:小约翰的游戏 最后,附上丑陋的代 ...
- 20、Java并发性和多线程-Slipped Conditions
以下内容转自http://ifeve.com/slipped-conditions/: 所谓Slipped conditions,就是说, 从一个线程检查某一特定条件到该线程操作此条件期间,这个条件已 ...
- PHP array_merge_recursive()
定义和用法 array_merge_recursive() 函数与 array_merge()函数 一样,将一个或多个数组的元素的合并起来,一个数组中的值附加在前一个数组的后面.并返回作为结果的数组. ...
- 基于FPGA的简易数字时钟
基于FPGA的可显示数字时钟,设计思路为自底向上,包含三个子模块:时钟模块,进制转换模块.led显示模块.所用到的FPGA晶振频率为50Mhz,首先利用它得到1hz的时钟然后然后得到时钟模块.把时钟模 ...
- 怎样一步步用D3画多曲线
Bar Chart: http://bl.ocks.org/mbostock/3885304 这是一个画柱状图的基本形式. Axis是数轴: tickets是数轴上的标尺.tickets第二个參数% ...
- git-svn for mac
熟练使用 git ,新公司用的是 svn,这就尴尬了,为了这个习惯问题,我还是毅然坚持使用 git,但是又不与公司的 svn 冲突,所以就找到了 git 的 git-svn 插件. 在 mac 上使用 ...
- 玩转CPU之直线
近期在看编程之美,看到第一个问题时,一下子就被吸引了,原来在windows 的任务管理器中还能够让CPU舞动起来,再一次的相信了编程中仅仅有想不到没有做不到,对于书中的做法和网上的实现大致都同样.只是 ...
- ALSA声卡驱动中的DAPM详解之七：dapm事件机制（dapm event）
前面的六篇文章,我们已经讨论了dapm关于动态电源管理的有关知识,包括widget的创建和初始化,widget之间的连接以及widget的上下电顺序等等.本章我们准备讨论dapm框架中的另一个机制:事 ...
- Ubuntu环境下安装nodejs和npm
1.安装python-software-properties sudo apt-get install python-software-properties 2.添加ppa curl -sL http ...