- 浏览: 1111249 次
文章分类
- 全部博客 (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 398flex 简介: 采用Flex布局的元素,被称为Flex容 ... -
CSS之页面元素飞入效果
2020-04-18 17:50 755效果预览: - https://www.runoob.com ... -
CSS之垂直居中
2020-04-02 10:00 438css里面用text-align:center ... -
Sass之&引用父选择器
2018-08-08 11:29 8282Sass之&引用父选择器 描述: 您可以使用&字符选 ... -
HTML5之canvas之粒子效果
2018-01-26 10:32 1466效果图: JavaScript 代码实现: & ... -
CSS之导航栏设计之 ul 之 li 标签排成一行
2019-06-04 11:11 2408在HTML页面元素设计中, 把具有相同一类功能的列表用 li ... -
HTML5/CSS3鼠标滑过图片滤镜动画效果
2017-12-21 10:54 1317HTML5/CSS3鼠标滑过图片滤镜动画效果 以前我们用CS ... -
CSS之提示框实现
2017-08-02 05:08 1962效果图: 注意以下要点: 1、提示框的箭头效果,且箭头 ... -
css 之 linear-gradient 之 进度条(progress bar)
2017-05-25 18:14 2187CSS 的 linear-gradient() 函数会创建 ... -
在 css 中使用 @font-face
2017-05-24 14:15 555@font-face 允许用户使用自定义的字体。在css中定义 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 653Jquery mouseenter() vs mouseove ... -
css:flex布局
2017-03-13 17:43 927A Complete Guide to Flexbox htt ... -
网站页面配色
2017-01-05 10:12 680导航栏,菜单栏 左侧菜单 导航,底部,选择列表 ... -
BootstrapCSS之Select
2016-10-18 17:00 1094效果图: 代码: <!-- Inclu ... -
CSS样式之带边框的 Anchor(超链接)
2016-10-08 15:19 2912效果图: HTML: <a c ... -
bootstrap css之响应式导航栏
2016-08-29 16:58 16767- 使用 Twitter Bootstrap 3 创建响应式导 ... -
CSS之 white-space : pre
2016-06-15 10:21 998在 github 的代码浏览页面,可以看到这样的 css 样式 ... -
CSS - li 元素显示在一行____ a 元素没有下横线
2016-05-27 20:44 2219原文链接: http://www.w3schools.com/ ... -
CSS - table 圆角 border radius
2016-04-29 12:08 4561效果: 代码: <!DOCTYPE htm ... -
[css - hr ] border color 横线高度和颜色
2016-04-28 10:59 3729如果设定 hr 的 border,会发现其高度会比不设置高2倍 ...
相关推荐
响应式Web设计是一种现代网页设计方法,旨在确保网站...通过学习"Responsive Web Design"这本书,读者将获得创建现代、适应性强的网页的实用技巧,并理解如何通过响应式设计提升用户体验,适应不断变化的数字设备环境。
响应式Web设计是一种现代网页开发方法,旨在提供跨设备、跨屏幕尺寸的无缝用户体验。它主要依赖于HTML5和CSS3的新特性来实现,确保网页在桌面电脑、平板电脑、智能手机和其他不同设备上都能自适应地展示内容。在这个...
本书《Responsive Web Design with HTML5 and CSS3 [eBook]》主要探讨了响应式网页设计的概念、方法和最佳实践。在当今这个多设备并存的时代,网站设计师和开发者面临着如何让网站在不同尺寸和分辨率的设备上提供...
响应式网页设计是一种现代网页开发方法,旨在确保网站在各种设备上都能提供良好的用户体验,无论设备的屏幕尺寸、分辨率或方向如何。随着HTML5和CSS3的出现,开发者拥有了更多的工具来创建适应性强、功能丰富的响应...
响应式网页设计(Responsive Web Design,简称RWD)是一种现代网页设计方法,旨在提供一个能够适应不同设备屏幕尺寸、分辨率和方向的网站界面。这种设计技术的出现是为了解决传统固定宽度网页在移动设备上显示不佳的...
响应式网页设计(Responsive Web Design, RWD)是一种让网页内容在不同设备、不同屏幕尺寸下都能良好显示的设计理念和技术。通过使用灵活的布局、可伸缩的图片和其他智慧型设计技术,RWD使得同一个网站能够在桌面...
**响应式网页设计(Responsive Web Design, RWD)** - **定义**:响应式网页设计是一种使网站在不同设备(如桌面、平板、手机等)上都能良好显示的设计方法。它依赖于灵活的布局、图片以及CSS媒体查询。 - **目标...
响应式网页设计(Responsive Web Design,简称RWD)的核心在于CSS3的媒体查询(Media Queries)技术。通过设置不同断点,设计师可以根据屏幕尺寸和设备特性来调整布局、图片大小、字体等元素,确保页面在各种分辨率...
响应式网页设计是现代网页设计领域中非常重要的一个分支,它主要解决的问题是如何让网站在不同尺寸的设备上都能够提供良好的浏览体验。在当今智能手机、平板电脑和不同尺寸的屏幕无处不在的时代,响应式设计的重要性...
**响应式网页设计**(Responsive Web Design, RWD)是一种网页设计的方法论,它旨在使网站在多种设备上都能提供优秀的用户体验。通过这种优化方式,开发者能够确保网站无论是在桌面电脑、平板电脑还是智能手机上都能够...
响应式网页设计(Responsive Web Design)是指网站页面能够自动适应不同屏幕分辨率和设备环境的设计理念。这种设计方法强调根据用户行为和设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整,确保...
#### 一、响应式网页设计(Responsive Web Design,RWD)概述 **响应式网页设计**是一种网页设计与开发的方法论,旨在使网站能够根据用户的设备环境(屏幕尺寸、平台、方向等)进行灵活布局和展示。这种设计方式...