博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS和CSS实现响应式
阅读量:5310 次
发布时间:2019-06-14

本文共 427 字,大约阅读时间需要 1 分钟。

一、CSS实现响应式

CSS响应式的实现主要依赖于CSS媒体查询:

媒体查询包含一个可选的媒体类型和零或多个表达式来限制使用媒体特性的样式表范围,例如:width,height,color。中的Media queries让内容的呈现可以只针对特定范围的输出设备而不必去改变内容本身。即通过媒体查询判断屏幕宽度,加载不同的CSS样式表

代码如下:注意一定要有一个默认样式表不加媒体查询,否则在IE8中访问时会没有样式表。

  
  响应式的演示  
  
  
  
  

 

二、JS实现响应式

JS响应式的实现也是依托于外联不同的CSS样式表,通过获取不同设备的屏幕宽度,选择性加载不同的CSS样式表。

  
  响应式的演示  
  
  
  

 

转载于:https://www.cnblogs.com/fenpho/p/6368478.html

你可能感兴趣的文章
和小哥哥一起刷洛谷(1)
查看>>
遇麻烦,Win7+Ubuntu12.10+Archlinux12.10 +grub
查看>>
SqlBulkCopy大批量导入数据
查看>>
pandas 修改指定列中所有内容
查看>>
「 Luogu P2285 」打鼹鼠
查看>>
lua语言入门之Sublime Text设置lua的Build System
查看>>
vue.js基础
查看>>
电脑的自带图标的显示
查看>>
[转载] redis 的两种持久化方式及原理
查看>>
C++ 删除字符串的两种实现方式
查看>>
ORA-01502: 索引'P_ABCD.PK_WEB_BASE'或这类索引的分区处于不可用状态
查看>>
Java抽象类和接口的比较
查看>>
开发进度一
查看>>
MyBaits学习
查看>>
管道,数据共享,进程池
查看>>
CSS
查看>>
[LeetCode] 55. Jump Game_ Medium tag: Dynamic Programming
查看>>
[Cypress] Stub a Post Request for Successful Form Submission with Cypress
查看>>
程序集的混淆及签名
查看>>
判断9X9数组是否是数独的java代码
查看>>