CSS响应式设计

<link rel=“stylesheet” type=“text/css” media=“screen and (max-width: 480px),screen and (max-device-width: 480px)” href=“link.css”/>

其中 max-width 指渲染界面最大宽度,max-device-width 指设备屏幕最大宽度
这段代码的意思是 当设备屏幕宽度小于等于480像素并且渲染界面最大宽度小于等于480像素时,引用link.css文件。

<link rel=“stylesheet” type=“text/css” media=“screen and (min-device-width: 480px),screen and (max-device-width: 980px)” href=“link.css”/>

当设备屏幕宽度大于等于480像素并且小于980像素时,引用link.css文件。

<link rel=“stylesheet” type=“text/css” media=“screen and (min-device-width: 980px)” href=“link.css”/>

当设备屏幕宽度大于等于980时,引用link.css文件。

第二种CSS文件内的写法:

@media screen and (max-width: 600px) { /*当屏幕尺寸小于等于600px时,应用下面的CSS样式*/
	.class {
		background: #ccc;
	}
}
@media screen and (min-width: 600px) { /*当屏幕尺寸大于等于600px时,应用下面的CSS样式*/
	.class {
		background: #ccc;
	}
}
@media screen and (min-width: 600px) and (max-width: 900px) { /*当屏幕尺寸大于等于600px并且小于900px时,应用下面的CSS样式*/
	.class {
		background: #fff;
	}
}
时间: 2024-10-11 06:38:24

CSS响应式设计的相关文章

响应式设计:理解设备像素,CSS像素和屏幕分辨率

概述 屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的概念:屏幕分辨率和设备像素的区别在于设备像素显示密度. 当设备屏幕ZOOM=100%的时候,浏览器CSS像素尺寸和设备像素相等,而当像素密度(pixel density)为1的时候,屏幕分辨率和设备像素相等. 响应式设计 在响应式设计中,使用了viewport,device-width,media

响应式设计的核心CSS技术Media(媒体查询器)

总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--兼容ie--><meta name="viewport" content="width=device-width, initial-scale=1"><!--得到媒体查询屏幕宽度,缩放比例--> 准备

第二次讨论——响应式设计、布局技巧、css性能优化、css预处理

第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于设备宽度,布局viewport等于度量viewport <meta name="viewport" content="width=device-width,initial-scale=1"> [[布局]] [水平居中] 一.text-align和inline

HTML和CSS高级指南之四——响应式设计

互联网发展的速度超乎所有人的想象,甚至可以说是疯狂.在过去几年里,移动互联网的发展已经开始崭露头角.而他的发展速度也远远超过了传统互联网. 如今很难找到一个人既没有移动设备,也没有多个可以上网的设备.在英国 移动电话的数量已远远超过人口数,保持这样的 增长势头,今年移动互联网的使用应该就有望超过桌面互联网. 随着移动互联网的兴起,也带来了一个问题,就是如何搭建一个网站,可以适合所有用户访问.行业对于这个问题的回答是响应式设计,也就是熟知的RWD. 第四课所涉及的主要内容 HTML 响应式设计概述

第一章 响应式设计之Media Quer

书里谈到尽量不要使用Media Queriy. 但是过多使用media query,会导致CSS变得脆弱和页面难以维护.一些方法可以减少页面使用 media query. 响应式设计: (1) 使用百分比替换固定的宽度.如果不行,也尽量使用vw, vh, vmin, vmax. (2) 使用max-width,而不使用width. (3) 对于一些元素,如img, object, video, iframe, 使用max-width: 100%. (4) 如果背景图片要完全覆盖容器,可以使用ba

响应式设计三部曲

随着智能手机的流行,响应式网页设计无疑成为了如今网页设计的大趋势.对于新手来时,响应设计听起来有点复杂,但它实际上是比你想象的更简单.只需下面的3个步骤即可构建一个响应式的网页! 1.Meta Tag 大多数移动浏览器扩展的HTML页面到宽视口宽度,以便在屏幕上适合.您可以使用viewport meta标签来重设此.下面的视口标签告诉使用该设备的宽度视口宽度和禁用初始规模浏览器. <meta name="viewport" content="width=device-w

响应式设计(一)

一.响应式设计(一)响应式设计初识,一个小小的demo,用来理解什么是响应式 今天的一个小小的demo,让我重新的认识了什么是响应式网页设计.我之前一直以为主要一个网页在不同的设备上浏览,网页可以自适应设备的屏幕大小,而不发生结构变形. 其实我觉得更准确去说是:根据不同的用户设备环境,页面可以做出不同的响应动作, 例如:在pc端浏览一行图片,看到的个数是4个,用手机看到的是2个图片,不同用户的设备环境,做出了不同的响应动作. 二.百度百科给出的概念: 响应式Web设计(Responsive We

响应式设计与自适应设计

响应式设计与自适应设计 相信从事前端页面设计的人都知道,页面呈现的效果及用户体验是非常重要的.当今社会移动设备的使用已超过了pc端,面对不同分辨率的设备,怎样做到页面体验的效果一样呢?这就成了最头疼的事情. 下面我们来看看响应式设计与自适应设计两者用法: 响应式Web设计(Responsive Web Design) :主要利用CSS3的媒介查询(Media Query)和Viewport来解决问题.通过媒介查询的设置,根据屏幕宽度.屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的

Responsive Design ------响应式设计

什么是响应式设计呢?维基百科是这样对响应式作的描述:“Responsive设计简单的称为RWD,是精心提供 各种设备都能浏览网页的一种设计方法,RWD能让你的网页在不同的设备中展现不同的设计风格.”从这一点描述来说,RWD不是流体布局,也不是网格布局, 而是一种独特的网页设计方法. 响应式设计要考虑元素布局的秩序,而且还需要做到“有求必应”,那就需要满足以下三个条件:网站必须建立灵活的网格基础:引用到网站的图片必须是可伸缩的:不同的显示风格,需要在Media Queries上写不同的样式. 要想