<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. Java中程序、进程、线程的区别。

    程序.进程.线程的区别. 程序(program):是一个指令的集合.程序不能独立执行,只有被加载到内存中,系统为他分配资源后才能执行. 进程(process):一个执行中的程序称为进程. 进程是系统分 ...

  2. gitlab中的几个常用界面（runner管理、gitlab-ci.yml管理、runner token管理、新建用户、拉用户入工程、拉用户入组、复制工程导入组）

    目录: 1.runner管理 2.gitlab-ci.yml管理 3.runner token管理 4.新建用户 5.拉用户入工程 6.拉用户入组 7.复制工程导入组 1.runners界面 http ...

  3. kbmMW 5.10.01试用报告

    1.FileClient.SameFile 调用这个方法,当本地文件不存在时,会一直等待.跟踪代码,发现: function TkbmMWCustomFileClient.SameFileEx(Loc ...

  4. Cloud Native Weekly |面对云平台宕机，企业如何止损

    KubeEdge v0.2发布 KubeEdge在18年11月24日的上海KubeCon上宣布开源的一个开源项目,旨在依托K8S的容器编排和调度能力,实现云边协同.计算下沉.海量设备的平滑接入. Ku ...

  5. App支付宝支付--PHP处理代码

    /* *生成APP支付订单信息 * @param number uid 用户id * @param string token 用户token * @param number oid 订单id * @p ...

  6. WCF Endpoint分类

    WCF中可以为一个Service配置多个Endpoint 这些Endpoint的分类方法有下面3中 1.全局就一个endpoint,一个接口公开所有的方法,这适合简单的业务场景 2.将endpoint ...

  7. Css案例整理

    1.实现两个div并排显示 案例:checkbox的标题和内容需要并排显示,checkbox竖向排列 <head> <style type="text/css"& ...

  8. 006_STM32程序移植之_SYN6288语音模块

    1. 测试环境:STM32C8T6 2. 测试模块:SYN6288语音模块 3. 测试接口: SYN6288语音模块: VCC------------------3.3V GND----------- ...

  9. Kafka 消息队列系列之分布式消息队列Kafka

    介绍 ApacheKafka®是一个分布式流媒体平台.这到底是什么意思呢?我们认为流媒体平台具有三个关键功能:它可以让你发布和订阅记录流.在这方面,它类似于消​​息队列或企业消息传递系统.它允许您以容 ...

  10. 五十三.Docker概述、部署Docker、Docker镜像、Docker基本命令

    1.安装Docker 准备两台虚拟机,IP为192.168.1.10和192.168.1.20 安装docker-engine 和 docker-engine-selinux 关闭防火墙   **** ...