<div class="a"> 123 </div>

　　@media(orientation:portrait) and (max-width:600px){
　　　　.a{
　　　　　　color:red;
　　　　}
 
　　}
　　@media(min-width:300px) and (max-height:300px){
　　　　.a{
　　　　　　color:blue;
　　　　}
　　}
 
　　这样就可以实现响应式的效果

响应式css样式的更多相关文章

  1. LayoutSimple简易响应式CSS布局框架

    开发这个css布局的目的是为了少做一些重复的工作,一是前端或多或少会开发一些很小的响应式项目, 二是UI设计的出来的界面总是各种布局各种样式,这个时候如果前端去使用Bootstrap或者Foundat ...

  2. kube框架结构-一个小型响应式CSS框架

    当你开始初建一个新的项目时,你可能需要一个不太复杂的基础框架,Kube框架应该是你最好的选择.一个独立的CSS文件,帮助你更简单的创建响应式的的布局设计. Kube Framework包括网格.按钮. ...

  3. elf，基于flexbox的响应式CSS框架

    官网地址:http://jrainlau.github.io/elf/项目地址:https://github.com/jrainlau/elf 介绍 取名为"精灵"的elf,是一个 ...

  4. SpaceBase – 基于 Sass 的响应式 CSS 框架

    SpaceBase 是一个基于 Sass 的响应式 CSS 框架.SpaceBase 是可以在建立和定制您的需要的一个样板层,它结合最佳实践为今天的响应式网页与我们对每一个项目中使用的核心组件. 在线 ...

  5. 外部式css样式，写在单独的一个文件中

    外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<l ...

  6. 内联式css样式，直接写在现有的HTML标签中

    CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种.这一小节先来讲解内联式. 内联式css样式表就是把css代码直接写在现有的HTML标签中 ...

  7. 实现响应式——CSS变量

    CSS 变量是 CSS 引入的一个新特性,目前绝大多数浏览器已经支持了,它可以帮助我们用更少的代码写出同样多的样式,大大提高了工作效率,本篇文章将教你如何使用 CSS 变量(css variable) ...

  8. Gumby – 基于 Sass 的灵活的，响应式 CSS 框架

    Gumby 框架是一个基于 SASS 的灵活的,响应式的 CSS 框架.可以借助其灵活,响应式的网格系统和 UI 套件快速创建逻辑的页面布局和应用程序原型. 您可能感兴趣的相关文章 35个让人惊讶的 ...

  9. 响应式 css

    1.class 样式一般用class,命名:中横线分隔,如:div-logo id 一般用于js快速地区别和获取元素,命名:驼峰命名法,如:divLogo (中间首字母大写) 2.必不可少的图片,用& ...

随机推荐

  1. js入门第一篇

    简介:JavaScript 运行在客户端(浏览器)是一种客户端语言,javascript的引擎被称为JavaScript引擎,为浏览器的一部分广泛用于客户端的脚本语言 应用场景:网页特效, 服务端开发 ...

  2. mysql打印用户权限的小技巧

    mysql5.5 5.6 SHOW GRANTS FOR mysql> SELECT DISTINCT CONCAT('SHOW GRANTS FOR ''',user,'''@''',host ...

  3. 【nodejs代理服务器一】nodejs http-proxy 开发反向代理服务器，防火墙，过滤常见的web渗透

    事出有因 最近web系统引来了黑客的攻击,经常被扫描,各种漏洞尝试. 分析攻击日志,有几种常见的攻击手段: 上传webshell 远程执行命令漏洞 sql注入 xxs 攻击 试探各种开源框架爆出来的漏 ...

  4. 切换composer国内镜像 Laravel China停用，切换阿里云composer全量镜像

    composer config -g repo.packagist composer https://packagist.phpcomposer.com Laravel China 镜像完成历史使命, ...

  5. airtest使用

    airtest Airtest是网易开发的手机UI界面自动化测试工具 通过截图功能操作手机虽然方便,但是截图涉及到分辨率的问题,代码不能在不同的手机上通用. 可以用来开发手机App爬虫 使用先抓大再抓 ...

  6. jmeter——参数化、关联、断言

    1.jmeter——参数化 三种方式: ${变量名} 1.1用户定义的变量 比如注册,登录都得用到手机号码,那就把手机号码自定义为变量 1)添加一个线程组--注册.登录HTTP请求--察看结果树--用 ...

  7. No package libmcrypt available.

    Centos安装PHP时,安装php依赖包时yum install libmcrypt libmcrypt-devel,报错如下: No package libmcrypt available. No ...

  8. 目标检测 — two-stage检测

    目前主流的目标检测算法主要是基于深度学习模型,其可以分成两大类:two-stage检测算法:one-stage检测算法.本文主要介绍第一类检测算法,第二类在下一篇博文中介绍. 目标检测模型的主要性能指 ...

  9. mongodb的基本操作之数据删除

    删除操作使用remove进行,数据的删除与查询类似,接受一个参数,与查询不同的是,为了防止误操作,删除操作不允许不传参数 比如 db.test_collection.remove() 会报错 Erro ...

  10. 说一下 runnable 和 callable 有什么区别？（未完成）

    说一下 runnable 和 callable 有什么区别?(未完成)