-
媒体查询 媒体查询在CSS3中得到了强大的扩展。使用这个属性可以让你的设计根据用户终端设备适配对应的样式。这也是响应式设计中最为关键的。可以说Responsive设计离开了Medial Queries就失去了他生存的意义。简单的说媒体查询可以根据设备的尺寸，查询出适配的样式。Responsive设计最关注的就是：根据用户的使用设备的当前宽度，你的Web页面将加载一个备用的样式，实现特定的页面风格。查看全部
-
响应式设计要考虑元素布局的秩序，而且还需要做到“有求必应”，那就需要满足以下三个条件：网站必须建立灵活的网格基础；引用到网站的图片必须是可伸缩的；不同的显示风格，需要在Media Queries上写不同的样式。查看全部
-
Responsive设计——meta标签 在响应式设计中如果没有这个meta标签，你就是蹩脚的，响应式设计就是空谈。 <meta name=”viewport” content=”” /> content属性值包括： width/height/initial-scale/minimun-scale/maximun-scale/user-scalable 在实际项目中，为了让Responsive设计在智能设备中能显示正常，也就是浏览Web页面适应屏幕的大小，可以通过这个可视区域的meta标签进行重置 <meta name=”viewport” content=”width=device-width,initial-scale=1.0” />查看全部
-
但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下： text-overflow:ellipsis; overflow:hidden; white-space:nowrap;查看全部
-
媒体类型包含十种，最常见的是：screen、all、print查看全部
-
display:flex; flex-direction:row;//方向水平，垂直为column align-items: center; //居中 justify-content:center; //居中 flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。查看全部
-
-webkit-transform: skew(45deg); -moz-transform: skew(45deg); transform:skew(45deg); } .wrapper span { display:block; -webkit-transform: skew(-45deg); -moz-transform: skew(-45deg); transform:skew(-45deg); 扭曲了多少就扭回多少？查看全部
-
Responsive布局技巧 在Responsive布局中，可以毫无保留的丢弃： 第一， 尽量少用无关紧要的div； 第二，不要使用内联元素（inline）； 第三，尽量少用JS或flash； 第四，丢弃没用的绝对定位和浮动样式； 第五，摒弃任何冗余结构和不使用100%设置。 帮助Responsive确定更好的布局 第一，使用HTML5 Doctype和相关指南； 第二，重置好你的样式（reset.css）； 第三，一个简单的有语义的核心布局； 第四，给重要的网页元素使用简单的技巧，比如导航菜单之类元素。 使用这些技巧，无非是为了保持你的HTML简单干净，而且在你的页面布局中的关键部分（元素）不要过分的依赖现代技巧来实现，比如说CSS3特效或者JS脚本。 你首先禁掉你页面中所有的样式（以及与样式相关的信息），在浏览器中打开，如果你的内容排列有序，方便阅读，那么你的这个结构不会差到哪里去。查看全部
-
Responsive设计（二） 4.屏幕分辨率 Responsive设计利用Media Queries属性针对浏览器使用的分辨率来适配对应的CSS样式。 5.主要断点 设备宽度的临界点。在Media Queries中，其中媒体特性“min-width”和“max-width”对应的属性值就是响应式设计中的断点值。使用主要断点和次要断点，创建媒体查询的条件。而每个断点会对应调用一个样式文件（或者样式代码） 设置断点应把握三个要点：满足主要的断点；有可能的话添加一些别的断点；设置高于1024的桌面断点。查看全部
-
Responsive设计（一） 响应式设计能让你的网页在不同的设备中展现不同的设计风格。是一种独特的网页设计方法。 需要满足以下三个条件：网站必须建立灵活的网格基础；引用到网站的图片必须是可伸缩的；不同的显示风格，需要在Media Queries上写不同的样式。 1.流体网格 将每个网格格子使用百分比单位来控制网格大小。让你的网格大小随时根据屏幕尺寸大小做出相对应的比例缩放。 2.弹性图片 不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。 img {max-width:100%;} 3.媒体查询 使用这个属性可以让你的设计根据用户终端设备适配对应的样式。Responsive设计最关注的就是：根据用户的使用设备的当前宽度，你的Web页面将加载一个备用的样式，实现特定的页面风格。查看全部
-
自定义单选样式查看全部
-
文字显示为省略号需要 text-overflow:ellipsis; 显示省略标记 overflow:hidden; 超出溢出隐藏 white-space:nowrap; 超出断开查看全部
-
.boxshadow-outset{ width:100px; height:100px; box-shadow:4px 4px 6px 1px #666, 10px 10px 50px 10px #888 inset; border-radius:50px; }查看全部
-
ul > li { list-style: none outside none; margin:0; padding: 10px; border-bottom: 3px solid #ddd; } ul > li:last-child { border-bottom: none; }查看全部
-
Media Queries使用方法 @media 媒体类型and （媒体特性）{你的样式} “max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。 @media screen and (max-width:480px){ .ads { display:none; } } “min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。 @media screen and (min-width:900px){ .wrapper{width: 980px;} } 多个媒体特性使用 @media screen and (min-width:600px) and (max-width:900px){ body {background-color:#f5f5f5;} } 设备屏幕的输出宽度Device Width <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" /> not关键词 @media not print and (max-width: 1200px){样式代码} 上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。 only关键词 <linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" /> <linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" /> Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀。查看全部
举报
0/150
提交
取消