css -- 运用@media实现网页自适应中的几个关键分辨率

经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题。到底分辨率是多少的时候设置呢?

先看下面的代码,这是从bootstrap中遍历出来的,min-width来确认分别是

768、 992、1200。当然了过去也有些设备宽度是600 480的,哪些小分辨率的我们都归类为小于767的。为什么是小于767而不是768呢,那是因为在css中@media (min-width: 768px)表示最小是768也就是>=768,这里有等于,所以我们判断更小的设备用@media (max-width: 767px)这边表示<=767就不会有冲突了

从上面我们可以看出有几个临界点的分辨率,那么我们就可以轻松的来写自己的自适应代码了

@media (min-width: 768px){ //>=768的设备 }

@media (min-width: 992px){ //>=992的设备 }

@media (min-width: 1200){ //>=1200的设备 }

注意下顺序,如果你把@media (min-width: 768px)写在了下面那么很悲剧,

@media (min-width: 1200){ //>=1200的设备 }

@media (min-width: 992px){ //>=992的设备 }

@media (min-width: 768px){ //>=768的设备 }

因为如果是1440,由于1440>768那么你的1200就会失效。

所以我们用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面

@media (max-width: 1199){ //<=1199的设备 }

@media (max-width: 991px){ //<=991的设备 }

@media (max-width: 767px){ //<=768的设备 }

高级的混合应用

@media screen and (min-width:1200px){ #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px} }

@media screen and (min-width: 960px) and (max-width: 1199px) { #page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px} }

@media screen and (min-width: 768px) and (max-width: 959px) { #page{ width: 900px; }#content,.div1{width: 620px;}#secondary{width:220px}select{max-width:180px} }

@media only screen and (min-width: 480px) and (max-width: 767px){ #page{ width: 450px; }#content,.div1{width: 420px;position: relative; }#secondary{display:none}#access{width: 450px; }#access a {padding-right:5px}#access a img{display:none}#rss{display:none}#branding #s{display:none} }

@media only screen and (max-width: 479px) { #page{ width: 300px; }#content,.div1{width: 300px;}#secondary{display:none}#access{width: 330px;} #access a {padding-right:10px;padding-left:10px}#access a img{display:none}#rss{display:none}#branding #s{display:none}#access ul ul a{width:100px} }

  1. 4

    上面的代码中用到了 screen这里指定了显示器为显示设备,也可以是print打印机等其他设备,一般我们用screen。或者干脆省略。如果想看详细的关于media的说明可以百度一下关于media query的知识

时间: 2024-10-06 07:36:09

css -- 运用@media实现网页自适应中的几个关键分辨率的相关文章

运用@media实现网页自适应中的几个关键分辨率

经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题.到底分辨率是多少的时候设置呢? 方法/步骤 1 先看下面的代码,这是从bootstrap中遍历出来的,min-width来确认分别是 768.992.1200.当然了过去也有些设备宽度是600 480的,哪些小分辨率的我们都归类为小于767的.为什么是小于767而不是768呢,那是因为在css中@media (min-width: 768px)表示最小是

css和图片在网页开发中的应用

现在我有个需求,要求开发一个简单的网页,网页内容只有标题和段落.但是要求标题用图片代替. 我知道最菜的菜鸟会这么写 <img src="#" alt="标题写这" /> <p>段落</p> 呵呵,然而img压根就不是标题,很显然,我们的标题还是要写出来的,于是有人会在img外部添加个h1.就像这样 <h1><img src ="#" alt="标题写在这儿" />&l

使用CSS3 Media Queries实现网页自适应

原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑等等.所以传统的固定宽度设计形式将不再是个最佳选择,网页设计需要有自适应性.网页的布局需要能够根据不同的分辨率和设备来自动调整,以达到到最佳显示效果.接下来会展示如何运用HTML5和CSS3来设计一个自适应网页. 效果预览代码下载 先看看它的效果 在开始

CSS3 Media Queries 实现网页自适应

文章转载自:爱思资源网http://www.aseoe.com/show-10-261-1.html 导语 接下来会展示如何运用 HTML5 和 CSS3 来设计一个自适应网页.当今银屏分辨率从 320px (iPhone) 到 2560px (大屏显示器) 或者更大.人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑等等.所以现在屏幕分辨率的范围很大,从 320px (iPhone) 到 2560px (大型显示器),甚至更大.用户也不只是使用台式电脑访问web站点了,他使用手机.笔记本电

使用CSS3 Media Queries实现网页自适应(转)

当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑等等.所以传统的固定宽度设计形式将不再是个最佳选择,网页设计需要有自适应性.网页的布局需要能够根据不同的分辨率和设备来自动调整,以达到到最佳显示效果.接下来会展示如何运用HTML5和CSS3来设计一个自适应网页. 效果预览代码下载 先看看它的效果 在开始之前,点击最终预览来看看它的效果.改变浏览器的宽度,你将会看到页面布局会跟着自动改变. 概述 当屏幕分辨

css网页自适应-1

一."自适应网页设计"的概念 2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度.并做出相应调整的网页设计. 他制作了一个范例,里面是<福尔摩斯历险记>六个主人公的头像.如果屏幕宽度大于1300像素,则6张图片并排在一行. 如果屏幕宽度在600像素到1300像素之间,则6张图片分成两行. 如果屏幕宽度在400像素到600像素之间,则导航栏移到网页头部. 如果屏幕宽

HTML、DIV+CSS网页制作中排版混乱的几种常见的情况

对于Web前端初学者或者经验不够丰富的人来说,出现页面排版布局混乱的情况并不罕见,有时候明明前面部分的网页都很整齐美观,可是在接下来的部分中经常会出现网页布局混乱,比如content无法调整到开发者需要的位置,或者出现页面重叠的现象.以下内容是我个人在网页制作过程中关于网页排版混乱及其解决办法的一些经验总结,不足之处,希望大家互相补充学习. )DIV+CSS网页错位的原因与解决方法 常常我们会遇到我们要设置在一行显示的布局,却因为种种原因造成了错位,看到结果是在一行的最后一个盒子布局错位掉下去了

网页设计中11 款最好CSS框架

网页设计和发展领域已经成为竞争激烈的虚拟世界.想要在网络的虚拟世界中生存,仅有一堆静止的在线网络应用是远远不够的,网页必须要有很多功能,配以让人无法抗拒的设计.网页编码一定要合适.精确,才能保证不发生错误,使网页能在浏览器上轻松加载出来.此外,还要在网页设计中留出足够的空间以充许日后的功能增加和改善,这样做才能让更多与时俱进的特征能加入到网页设计中. 网页设计员和研发者可用的最好工具之一便是 CSS 框架,它提供高端解决方案来适应高端网页研发需求.CSS 框架减化了编码结构.减少了编码时间,为研

手机版网页自适应设计

一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="viewport" content="width=device-width, initial-scale=1" /> viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial