- 浏览: 1091650 次
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言,WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986:
Java并发编程:自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986:
http://win.51apps.com.cn/https: ...
temp -
ztwsl:
不错,支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai:
谢谢您能将知识精华汇编总结,让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23:
谢谢了,顶顶
struts2中的ValueStack学习
Responsive Web Design(自响应式网页设计)
一、认识:media
从 CSS2.1 那会,样式表就可以使用 media type 进行样式的判断了。那时是这么写的:
如果当前 media 是浏览器,则加载 core.css。
如果当前 media 是打印机,则加载 print.css。
感谢 W3C 在 CSS3 中对 media 进行了扩展:可以在 media 中增加条件。
例如:
或:
解释:
当 media 为 screen(浏览器,平板电脑,手机),且宽度小于 480px 时,加载 shetland.css
当然,
它还可以将颗粒度细化到符合哪些条件,则应用那个样式类:
例子一:
例子2:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_mediaquery
应用:
http://lixh1986.iteye.com/blog/2321482
引用请注明,
原文出处:http://lixh1986.iteye.com/blog/2376864
参考:
https://alistapart.com/article/responsive-web-design
-
一、认识:media
从 CSS2.1 那会,样式表就可以使用 media type 进行样式的判断了。那时是这么写的:
<link rel="stylesheet" type="text/css" href="core.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" />
如果当前 media 是浏览器,则加载 core.css。
如果当前 media 是打印机,则加载 print.css。
感谢 W3C 在 CSS3 中对 media 进行了扩展:可以在 media 中增加条件。
例如:
<link rel="stylesheet" type="text/css" href="shetland.css" media="screen and (max-device-width: 480px)" />
或:
@import url("shetland.css") screen and (max-device-width: 480px);
解释:
当 media 为 screen(浏览器,平板电脑,手机),且宽度小于 480px 时,加载 shetland.css
当然,
它还可以将颗粒度细化到符合哪些条件,则应用那个样式类:
@media screen and (max-device-width: 480px) { .column { float: none; } }
例子一:
<!DOCTYPE html> <html> <head> <style> body { background-color: lightblue; } @media screen and (min-width: 480px) { body { background-color: lightgreen; } } </style> </head> <body> <h1>调整浏览器的宽度,观察效果!</h1> <p> 当且仅当:media 类型为 screen(浏览器,平板,手机), 且 viewport 的宽度大于等于 480px 时,media query 中的样式才会起作用。 </p> </body> </html>
例子2:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_mediaquery
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> body { font-family: "Lucida Sans", Verdana, sans-serif; } .main img { width: 100%; } h1{ font-size: 1.625em; } h2{ font-size: 1.375em; } .header { padding: 1.0121457489878542510121457489879%; background-color: #f1f1f1; border: 1px solid #e9e9e9; } .menuitem { margin: 4.310344827586206896551724137931%; margin-left: 0; margin-top: 0; padding: 4.310344827586206896551724137931%; border-bottom: 1px solid #e9e9e9; cursor: pointer; } .main { padding: 2.0661157024793388429752066115702%; } .right { padding: 4.310344827586206896551724137931%; background-color: #CDF0F6; } .footer { padding: 1.0121457489878542510121457489879%; text-align: center; background-color: #f1f1f1; border: 1px solid #e9e9e9; font-size: 0.625em; } .gridcontainer { width: 100%; } .gridwrapper { overflow: hidden; } .gridbox { margin-bottom: 2.0242914979757085020242914979757%; margin-right: 2.0242914979757085020242914979757%; float: left; } .gridheader { width: 100%; } .gridmenu { width: 23.481781376518218623481781376518%; } .gridmain { width: 48.987854251012145748987854251012%; } .gridright { width: 23.481781376518218623481781376518%; margin-right: 0; } .gridfooter { width: 100%; margin-bottom: 0; } @media only screen and (max-width: 500px) { .gridmenu { width: 100%; } .menuitem { margin: 1.0121457489878542510121457489879%; padding: 1.0121457489878542510121457489879%; } .gridmain { width: 100%; } .main { padding: 1.0121457489878542510121457489879%; } .gridright { width: 100%; } .right { padding: 1.0121457489878542510121457489879%; } .gridbox { margin-right: 0; float: left; } } </style> </head> <body> <div class="gridcontainer"> <div class="gridwrapper"> <div class="gridbox gridheader"> <div class="header"> <h1>The Pulpit Rock</h1> </div> </div> <div class="gridbox gridmenu"> <div class="menuitem">The Drive</div> <div class="menuitem">The Walk</div> <div class="menuitem">The Return</div> <div class="menuitem">The End</div> </div> <div class="gridbox gridmain"> <div class="main"> <h1>The Walk</h1> <p>The walk to the Pulpit Rock will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p> <img src="pulpitrock.jpg" alt="Pulpit rock" width="" height=""> </div> </div> <div class="gridbox gridright"> <div class="right"> <h2>What?</h2> <p>The Pulpit Rock is a part of a mountain that looks like a pulpit.</p> <h2>Where?</h2> <p>The Pulpit Rock is in Norway</p> <h2>Price?</h2> <p>The walk is free!</p> </div> </div> <div class="gridbox gridfooter"> <div class="footer"> <p>This web page is a part of a demonstration of fluid web design made by www.w3schools.com. Resize the browser window to see the content response to the resizing.</p> </div> </div> </div> </div> </body> </html>
应用:
http://lixh1986.iteye.com/blog/2321482
引用请注明,
原文出处:http://lixh1986.iteye.com/blog/2376864
参考:
https://alistapart.com/article/responsive-web-design
-
发表评论
-
Flex之 justify-content 和 flex-direction 的应用
2021-12-23 19:39 299flex 简介: 采用Flex布局的元素,被称为Flex容 ... -
CSS之页面元素飞入效果
2020-04-18 17:50 667效果预览: - https://www.runoob.com ... -
CSS之垂直居中
2020-04-02 10:00 338css里面用text-align:center ... -
Sass之&引用父选择器
2018-08-08 11:29 8237Sass之&引用父选择器 描述: 您可以使用&字符选 ... -
HTML5之canvas之粒子效果
2018-01-26 10:32 1433效果图: JavaScript 代码实现: & ... -
CSS之导航栏设计之 ul 之 li 标签排成一行
2019-06-04 11:11 2294在HTML页面元素设计中, 把具有相同一类功能的列表用 li ... -
HTML5/CSS3鼠标滑过图片滤镜动画效果
2017-12-21 10:54 1283HTML5/CSS3鼠标滑过图片滤镜动画效果 以前我们用CS ... -
CSS之提示框实现
2017-08-02 05:08 1923效果图: 注意以下要点: 1、提示框的箭头效果,且箭头 ... -
css 之 linear-gradient 之 进度条(progress bar)
2017-05-25 18:14 2121CSS 的 linear-gradient() 函数会创建 ... -
在 css 中使用 @font-face
2017-05-24 14:15 518@font-face 允许用户使用自定义的字体。在css中定义 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 618Jquery mouseenter() vs mouseove ... -
css:flex布局
2017-03-13 17:43 855A Complete Guide to Flexbox htt ... -
网站页面配色
2017-01-05 10:12 651导航栏,菜单栏 左侧菜单 导航,底部,选择列表 ... -
BootstrapCSS之Select
2016-10-18 17:00 1036效果图: 代码: <!-- Inclu ... -
CSS样式之带边框的 Anchor(超链接)
2016-10-08 15:19 2865效果图: HTML: <a c ... -
bootstrap css之响应式导航栏
2016-08-29 16:58 16717- 使用 Twitter Bootstrap 3 创建响应式导 ... -
CSS之 white-space : pre
2016-06-15 10:21 942在 github 的代码浏览页面,可以看到这样的 css 样式 ... -
CSS - li 元素显示在一行____ a 元素没有下横线
2016-05-27 20:44 2175原文链接: http://www.w3schools.com/ ... -
CSS - table 圆角 border radius
2016-04-29 12:08 4532效果: 代码: <!DOCTYPE htm ... -
[css - hr ] border color 横线高度和颜色
2016-04-28 10:59 3687如果设定 hr 的 border,会发现其高度会比不设置高2倍 ...
相关推荐
如:“Implementing.Responsive.Design-响应式Web设计实践”。书名经反复校对绝无一字错漏。 (5)每本pdf书默认都是有书签的。来源不限“某星”网站,还有各大网络书店和出版社官网的页码信息。 凡无书签的pdf...
响应式web设计-HTML5和CSS3实战_Responsive Web Design with HTML5 and CSS3 code 源代码
Dive_into_Responsive_Web_Design(响应式设计电子书)
经典书籍,web 响应式设计,简单易懂.
使用Angular进行响应式web开发,想快下
responsive web design 1.响应式设计意味着什么? 2.怎么做响应式设计?
学习并探索如何在响应式网页设计的背景下利用HTML5的最新功能 学习如何使用新的Flexbox布局机制,编码响应式图像,并了解如何在响应式项目中实施SVG 通过使用CSS动画,转换和转换使您的页面交互
响应式Web设计(Responsive Web design)的理念是,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、...
FreeCodeCamp响应式Web设计认证。 这些是我传递,实现对网站设计certication项目 。 对于每个项目,都需要在下面运行此脚本,以检查项目是否已满足挑战的要求。 [removed][removed] 挑战1-建立致敬页面 解决方案: ...
响应式网页设计的经典书籍,英文原版,蓝皮书,pdf+epub格式
响应式web设计最新书籍,结合HTML5, CSS3, JavaScript, jQuery, and Bootstrap 4等技术。
它的响应式网页设计网站建立在HTML5,CSS3技术和精美的响应式设计之上。
FCC响应式网页设计 响应式网页设计做免费代码营 致敬页 产品着陆页 调查表格 文件夹
freeCodeCamp响应式Web设计项目-登陆页面 完成以下用户案例,并通过所有测试。 赋予您自己的个人风格。 技术栈 您可以使用HTML,JavaScript和CSS来完成此项目。 推荐使用普通CSS,因为到目前为止这是我们所学的课程...
个人档案 使用HTML和CSS编写的自适应Web设计个人作品集。
教你使用HTML5和CSS3进行响应式Web设计,想快下