<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />
上面表示的是:当屏幕小于或等于600px时,将采用small.css样式来渲染Web页面。
<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css"  />
上面表示的是:当屏幕大于或等于900px时,将采用big.css样式来渲染Web页面。
body{
background-color: #fff;
}
@media screen and (max-width: 600px) {
body{
background-color: #ccc;
}
}
上面表示的是:当屏幕小于或等于600px时,背景色显示成灰色。
body{
background-color: #fff;
}
@media screen and (min-width: 900px) {
body{
background-color: #ccc;
}
}
上面表示的是:当屏幕大于或等于900px时,背景色显示成灰色。

响应式设计:根据不同设备引不同css样式的更多相关文章

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

    概述 屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的 ...

  2. 学习笔记1--响应式网页+Bootstrap起步+全局CSS样式

    一.学习之前要了解一些背景知识: 在2g时代,3g时代,4g时代,早期的网页浏览设备,功能机,智能机.(本人最喜欢的透明肌,和古典黑莓机) 1.什么是响应式网页? Responsive Web Pag ...

  3. CSS 响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

  4. css响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

  5. web设计经验<一> 提升移动设备响应式设计的8个建议

    今天看到一些关于web设计的一些建议和设计经验,拿出来分享分享. 第一篇: 提升移动设备响应式设计的8个建议 一.直观性和易用性 在使用移动设备时,对于杂乱.复杂或者不直观的设计造成的混乱不佳的用户体 ...

  6. Windows 10 响应式设计和设备友好的开发

    使用Effective pixels有效像素设计UI 什么是缩放像素和Effective有效像素: 当你的应用程序运行在Windows的设备,系统用一个算法控制的规范,字体,和其他UI元素显示在屏幕上 ...

  7. Grid – 入门必备!简单易懂的响应式设计指南

    如今,人们使用各种各样的移动设备访问网页,设计师们需要去适配不同的屏幕,让用户在都能有最佳的浏览体验.Grid 是一个简单的响应式设计指南,按照这些简单的步骤,你的就能够掌握基础的响应网页设计技巧. ...

  8. HTML5实践 -- 使用CSS3 Media Queries实现响应式设计

    CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...

  9. Bootstrap 响应式设计

    本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...

随机推荐

  1. BZOJ2006:[NOI2010]超级钢琴——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=2006 https://www.luogu.org/problemnew/show/P2048#su ...

  2. IPC$入侵大全

    0x01  ipc$的定义 IPC$(Internet Process Connection)是共享"命名管道"的资源(大家都是这么说的),它是为了让进程间通信而开放的命名管道,可 ...

  3. Linux内核设计第二周学习总结 完成一个简单的时间片轮转多道程序内核代码

    陈巧然 原创作品 转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.使用实验楼的虚拟机 ...

  4. [ACM][2018南京预赛]Magical Girl Haze

    一.题面 样例输入: 15 6 11 2 21 3 42 4 33 4 13 5 64 5 2 样例输出: 3 二.思路 关键词:分层BFS 考试时觉得题干意思很清晰——求可将k条边赋值为0的最短路. ...

  5. 「Linux」VMware安装centos7(一)

    1.点击:创建虚拟机 2.选择:自定义(高级),下一步 3.点击:下一步 4.选择:稍后安装操作系统,下一步 5.选择:操作系统和对应的版本,下一步 6.设置:虚拟机名称和安装位置,下一步 7.设置: ...

  6. 「CSS」文本编排相关的CSS属性设置

    1.font-family:设置字体族. 格式为font-family:字体1,字体2,……,通用字体族|inherit. 通用字体族,是指一类相似的字体.W3C的CSS规则规定,要指定一个通用字体族 ...

  7. 使用quartz.jar 、quartz-jobs.jar 实现定时任务 。实现 定时采集 接口数据

    前言 定时任务管理,在java中有很多种的方式 ,有java自带的注解方式@Scheduled  等 ,现在我要说的是一种也是使用比较广泛的一种quartz管理 使用此类 需要的加jar包有 quar ...

  8. dp+分类讨论 Gym 101128E

    题目链接:http://codeforces.com/gym/101128 感觉这个人写的不错的(我只看了题目大意):http://blog.csdn.net/v5zsq/article/detail ...

  9. SSM框架整合遇到的问题

    1.Maven中Dubbo集成spring2.5以上版本 项目中dubbo集成spring4.x,配置pom时需要注意排除spring的依赖,我这里用的是tomcat,所以把jboss也排除了: &l ...

  10. Load an image from a url into a PictureBox

    var url="https://xyk.cebbank.com/verify_code.jpg?3345789"; HttpClient client = new HttpCli ...