媒体查询（pc端，移动端不同布局）
媒体查询语法：
1.内联写法：and之后必须有空格
@media screen and (min-width:960px //判断浏览器大小条件){
body{background：red} //常规的样式
}
2.外联写法：当满足屏幕满足条件的时候连接href后的css文件
<link='stylesheet' media='screen and (min-width:960)' href='xx.css'/>
<link='stylesheet' media='screen and (min-width:960) and (max-width:1960)' href='xx.css'/>
媒体查询根据不同屏幕显示不同界面有两种方式：
1.在不同的媒体查询判定的大括号后写不同的样式
2.写两个相同的HTML内部的内容，通过媒体查询判断界面后，显示一个，隐藏另一个
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.big{ /*1*/
width: 1000px;
outline: 1px solid #000;
margin: auto;
color: #fff;
}
.big>div{
width: 50%;
height: 200px;
outline: 1px dashed yellow;
background: orange;
float: left;
}
.big2{ /*2*/
width: 600px;
outline: 1px solid #000;
margin: auto;
color: #fff;
display: none;
}
.big2>div{
width: 100%;
height: 200px;
outline: 1px dashed yellow;
background: lightpink;
clear: both;
}
@media screen and (max-width: 640px) {
.big{display: none}
.big2{display: block}
}
</style>
</head>
<body>
<div class="big">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div> <div class="big2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
媒体查询（pc端，移动端不同布局）的更多相关文章
- 轻轻松松学CSS:媒体查询
轻轻松松学CSS:利用媒体查询创建响应式布局 媒体查询,针对不同的媒体类型定制不同的样式规则.在网站开发中,可以创建响应式布局. 一.初步认识媒体查询在响应式布局中的应用 下面实例在屏幕可视窗口尺寸大 ...
- 移动端响应式布局--你不知道的CSS3.0媒体查询，解决rem部分情况下无法适配的场景
媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...
- (响应式PC端媒体查询)电脑屏幕分辨率尺寸大全
(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全 时间:2015-08-17 16:50:40 阅读:3961 评论:0 收藏:0 [点我收藏+] 标签:styl ...
- 媒体查询ipad,pc端
媒体查询 /* 判断ipad */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px){ ...
- background-size在PC端和移动端使用媒体查询的不同
1.PC端background-size:100%:是展现原图的大小. 2.使用媒体查询的移动端的background-size:100%:是根据内容的高度自动拉伸高度的.
- pc端响应式-媒体查询
媒体查询(@media):能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果 列举常用的pc屏幕宽度: 1024 1280 1366 1440 1680 1920 ...
- 移动端开发rem布局之less+媒体查询布局的原理步骤和心得
rem即是以html文件中font-size的大小的倍数rem布局的原理:通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小 ...
- 移动端开发-viewport与媒体查询
首先要知道,在移动开发中,手机的浏览器会默认网页是为宽屏而设计的,它会缩小整个页面来适应屏幕. 1. 不使用viewport出现的问题 提到响应式设计,大家首先想到的可能是 Bootstrap , @ ...
- 前端笔记之移动端&响应式（上）媒体查询&Bootstrap&动画库&zepto&velocity
一.媒体(介)查询 1.1 基本语法 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有:width.height和color(等).使用媒体查询可以在不改变 ...
随机推荐
- Ansible 模块命令介绍
copy模块: 目的:把主控端/root目录下的a.sh文件拷贝到到指定节点上 命令:ansible 10.1.1.113 -m copy -a 'src=/root/a.sh dest=/tmp/' ...
- 关于试用jquery的jsonp实现ajax跨域请求数据的问题
我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...
- MySQL存储过程动态SQL语句的生成
用Mysql存储过程来完成动态SQL语句,使用存储过程有很好的执行效率: 现在有要求如下:根据输入的年份.国家.节假日类型查询一个节假日,我们可以使用一般的SQL语句嵌入到Java代码中,但是执行效率 ...
- CentOS7 编译安装 nginx-1.10.0
对于NGINX 支持epoll模型 epoll模型的优点 定义: epoll是Linux内核为处理大批句柄而作改进的poll,是Linux下多路复用IO接口select/poll的增强版本,它能显著的 ...
- C语言中，头文件和源文件的关系（转）
简单的说其实要理解C文件与头文件(即.h)有什么不同之处,首先需要弄明白编译器的工作过程,一般说来编译器会做以下几个过程: 1.预处理阶段 2.词法与语法分析阶段 3.编译阶段,首先编译成纯汇编语句, ...
- Linux 相关面经
都说没用过Linux都不要说自己搞过开发.我因为项目就是Linux没办法才接触Linux的,不过用了一段时间大黑屏外人看不懂的样子感觉还是屌屌的,虽说用过但知道也仅限于权限内的一些知识,还是一起看下面 ...
- [转]DDD领域驱动设计基本理论知识总结
领域驱动设计之领域模型 加一个导航,关于如何设计聚合的详细思考,见这篇文章. 2004年Eric Evans 发表Domain-Driven Design –Tackling Complexity i ...
- 【Android】一道Android OpenGL笔试题
一道Android OpenGL笔试题 SkySeraph May. 5th 2016 Email:skyseraph00@163.com 更多精彩请直接访问SkySeraph个人站点:www.sky ...
- 【学习篇：他山之石，把玉攻】Ajax请求安全性讨论
在开发过程中怎样考虑ajax安全及防止ajax请求攻击的问题. 先上两段网摘: Ajax安全防范的方法: 判断request的来源地址.这样的方式不推荐,因为黑客可以更改http包头,从而绕过检测. ...
- gcc编译器用法（自学总结）
GCC仅仅意味着GNU C Compiler. gcc工作四个步骤:预处理,编译,汇编,连接. 1.预处理: 编译器将C源代码中的包含的头文件如stdio.h编译进来,用户可以使用gcc的选项&quo ...