@media screen】的更多相关文章

其实CSS2中已经有了媒体查询的概念,但是CSS3中媒体查询功能更加的强大! 首先,我们来看一个小例子 设置媒体查询的 Max Width ,改变窗口大小到600px的时候就会触发一下代码: @media screen and (max-width: 600px) { .class { background: #ccc; } }…
利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值 1280分辨率以上(大于1200px) @media screen and (min-width:1200px){ #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px} } 1100分辨率(大于96…
开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备.那么,Media Queries是如何工作的?两种方式:一种是直接在link中判断设备的尺寸,然后引用不同的css文件: <link rel="stylesheet" type="text/css" href=&qu…
当今移动设备的发展已经越来越迅速,移动web开发的需求也越来越多多.许多大平台.大门户都纷纷推出了自己的移动web版网站. 随着移动设备飞速的发展,移动产品的屏幕规格越来越多.从几年前的320×240像素的屏幕,到现在1920×1080分辨率的屏幕.各种分辨率的屏幕让前端开发的人们叫苦连连,如何使用一种有效的方式来解决各种屏幕分辨率下的用户体验呢? 在css2中就有media type属性,用于判断媒体类型.而在css3中新增了 media query属性用于增强media type属性.因此当…
1.解决兼容性问题 (1)页面最顶部必须定义:<!DOCTYPE html> (2)点击:下载 respond.js 文件 (3)引入<script src="respond.js"></script>:respond.js必须在样式表之后引用: (4)页面必须在服务器环境中运行,直接打开用不了 2.使用css3判断窗口大小设置不同样式: 举个例子: /*宽度小于500px时:背景为红色*/ @media screen and (max-width:…
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. 二.响应式布局有哪些优点和缺点? 优点: 面对不同分辨率设备灵活性强 能够…
开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备.那么,Media Queries是如何工作的?两种方式: 一种是直接在link中判断设备的尺寸,然后引用不同的css文件: 1 <link rel="stylesheet" type="text/css" href=…
@media screen and (min-width:800px){ .a{  background: url('../image/banner/banner1.jpg') no-repeat left top;}} max-width:定义输出设备中的页面最大可见区域宽度   宽度小于800px里面的值才会生效 min-width:定义输出设备中的页面最小可见区域宽度  宽度大于800px里面的值才会生效 块元素(如div等)宽度默认是100% 既为父元素宽度的 100%. body的默认…
我们先来看下下面这段代码,估计很多人在响应式的网站CSS很经常看到类似下面的这段代码: @media screen and (max-width: 960px){ body{ background: #000; } } 这个应该算是一个media的一个标准写法,上面这段CSS代码意思是:当页面小于960px的时候执行它下面的CSS.这个应该没有太大疑问. 应该有人会发现上面这段代码里面有个screen,他的意思是在告知设备在打印页面时使用衬线字体,在屏幕上显示时用无衬线字体.但是目前我发现很多网…
html自适应布局,@media screen,媒体查询 自适应代码示例: <!doctype html> <html> <head> <meta charset="utf-8"> <title>响应式布局</title> <style type="text/css"> *{padding:0px; margin:0px; font-family:"微软雅黑";}…
当今移动设备的发展已经越来越迅速,移动web开发的需求也越来越多多.许多大平台.大门户都纷纷推出了自己的移动web版网站. 随着移动设备飞速的发展,移动产品的屏幕规格越来越多.从几年前的320×240像素的屏幕,到现在1920×1080分辨率的屏幕.各种分辨率的屏幕让前端开发的人们叫苦连连,如何使用一种有效的方式来解决各种屏幕分辨率下的用户体验呢? 在css2中就有media type属性,用于判断媒体类型.而在css3中新增了 media query属性用于增强media type属性.因此当…
PrintArea打印,局部DIV打印插件,依赖JQuery. github:https://github.com/RitsC/PrintArea 当打印时需要临时改变页面布局,可以使用 @media print{ /* * CSS */ } 打印时生效,打印完自动失效. 需要屏幕自适应,或多种分辨率可以使用 @media screen and 一.判断媒体类型,引用不同的样式表 <link rel=”stylesheet” media=”screen and (判断条件)” herf=”需要调…
利用@media screen实现网页布局的自适应,IE9一下不支持 @media screen /*1280分辨率以上(大于1200px)*/ @media screen and (min-width:1200px){ .p1{color: #f00}; } /*1100分辨率(大于960px,小于1199px)*/ @media screen and (min-width: 960px) and (max-width: 1199px) { .p2{color: #f00}; } /*880分…
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen"/>media=screen 是什么意思? 有时我们在分析别人的网站源代码的时候,发现在头标签的样式表里面多了个media=screen 或者media="print,原来这些都是相对于媒介来进行设置的,就像Potoshop一样,每一种模式也对应一种媒介. 比如…
@media screen and (max-width:360px){body,input,select{font-size:38%}} @media screen and (min-width:360px){body,input,select{font-size:15.75px}} @media screen and (min-width:400px){body,input,select{font-size:17.5px}} @media screen and (min-width:480p…
min-width可以容器设置最小宽度,低于改宽度时,会自动加上滚动条,支持ie7及ie7+: @media only screen and (min-width: /*最小宽度(要加单位px)*/) { /*里面设置样式*/}(只支持ie8+) 两者可以混合在一起用,但是因为@media screen不支持ie9以下,所以使用时应考虑项目对浏览器支持的要求.…
@media screen and (min-width:1200px){ //大于等于1200px才会进入 }   @media screen and (max-width:375px) { //小于等于375可以进入 html { background: red; } } 由此可见,边界都包含在内. 更多参考连接 https://www.runoob.com/cssref/css3-pr-mediaquery.html…
设计思路很简单,首先先定义在标准浏览器下的固定宽度(假如标准浏览器的分辨率为1024px,那么我们设置宽为980px),然后用Media Query来监测浏览器的尺寸变化,当浏览器的分辨率小于1024px的时候,则通过Media Query预设的样式表来将页面的宽度设置为百分比显示,这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整.同理,当浏览器的可视区域改变到某个值(假如为650px)的时候,页面的结构元素根据Media Query预设的层叠样式表来进行相对应的调整.看看我们的例子…
在css中使用@media screen 通过检索宽度 对应改变html中class的css属性. 1280分辨率以上(大于1200px) @media screen and (min-width:1200px){ .content{ width: 1100px; height:500px;} .left{width:500px;hegith:1000px;background:#000;} .right{width:500px;hegith:1000px; marigin-left:100px…
概念: device-pixel-ratio:定义输入设备屏幕的可视宽度与可见高度比率. device-width:输入设备屏幕的可视宽度. orientation :屏幕横竖屏定向.landscape 是横向,portrait 是纵向[ipad 相反] /* iPhone 4 ———– */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio…
@media only screen and (min-width: 310px) and (max-width: 360px) { }@media only screen and (min-width: 360px) and (max-width: 374px) { } @media only screen and (min-width: 375px) and (max-width: 400px) { } @media only screen and (min-width: 400px) an…
参考地址: http://www.swordair.com/blog/2010/08/431/ http://ashaochangfu.blog.163.com/blog/static/104251730201210245438273/ http://newhtml.net/通过-css-media-query-制作感知屏幕尺寸的表格/ http://www.zhangxinxu.com/wordpress/2011/08/css3-media-queries%E7%9A%84%E4%BA%9B…
@media only screen and  only(限定某种设备) screen 是媒体类型里的一种 and 被称为关键字,其他关键字还包括 not(排除某种设备) /* 常用类型 */类型 解释all 所有设备braille 盲文embossed 盲文打印handheld 手持设备print 文档打印或打印预览模式projection 项目演示,比如幻灯screen 彩色电脑屏幕speech 演讲tty 固定字母间距的网格的媒体,比如电传打字机tv 电视 screen一般用的比较多,下面…
------------------- 1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) and (max-width: 480px){在这里写小屏幕设备的样式} @media only screen and (min-width: 321px) and (max-width: 1024px){这里写宽度大于321px小于1024px的样式(一般是平板电脑)} @media only scr…
先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3 加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. 那么该怎么定义 media 呢,看下面的代码,你肯定能猜出个大概. <!-- link元素中的CSS媒体查询 --> <link rel="stylesheet" media="(max-wi…
@media screen and (max-device-width: 1920px) and (min-device-width: 1920px) 指定1920分辨率的样式,使用device-width可以无视浏览器缩放.…
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设备并采用不同的样式表. 例如,你可以把用于大屏幕上显示的样式和用于移动设备的专用样式放在一个样式文档中,这样,在不改变文档内容的情况下,不同的设备可以呈现不同的界面外观.阅读这篇文章学习 CSS3 Media Queries 的基本功能和国外使用 CSS3 的 Media Queries 特性的优秀…
css3 media  严格来说是自适应布局 对不同的屏幕(正确的说应该是) 写不同的css样式.而流式布局 则才算是响应式布局. css3 media  语法: @media mediatype and|not|only (media feature) {    CSS-Code;} 在这之前一直对媒体查询有两个关键词min-width和max-width,模糊今天特意梳理下. width: width: 通常指代视口宽度:另外width和device width的区别在于,device wi…
× 目录 [1]媒介类型 [2]媒体属性 [3]语法[4]方法 前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查询的内容 媒介类型 在CSS2中,媒体查询只使用于<style>和<link>标签中,以media属性存在 media属性用于为不同的媒介类型规定不同的样式 screen 计算机屏幕(默认值) tty 电传打字机以及使用等…
原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑等等.所以传统的固定宽度设计形式将不再是个最佳选择,网页设计需要有自适应性.网页的布局需要能够根据不同的分辨率和设备来自动调整,以达到到最佳显示效果.接下来会展示如何运用HTML5和CSS3来设计一个自适应网页. 效果预览代码下载 先看看它的效果 在开始…