-
注意加前缀！！!注意兼容性！！！查看全部
-
1.css3伪类 :before,:after 2.css3伪元素 ::before,::after 3.清除浮动clearfix .clearfiz:before, .clearfix:after{ content:" ", display:table/block; } .clearfix:after{ clear:both; overflow:hidden; } 4.插入属性 a:before{ content:attr(title); color:#ff0; }查看全部
-
resize兼容处理：不允许用户缩放 -webkit-resize：none; -moz-resize:none; -o-resize:none; -ms-webkit:none; resize:none;查看全部
-
resize允许用户自由缩放属性 resize:none|both|horizontal|vertical|inherit none-不能拖放修改尺寸大小 both-用户可以拖放元素，同时修改元素的宽度和高度 horizontal-用户可以拖放，修改元素的宽度 vertical-用户可以拖放，修改元素的高度查看全部
-
设备屏幕大小： 1.iphone或Smartphones： @media screen and (min-device-width:320px) and (min-device-width:480px){ 选择器：{样式控制} } 2.ipad横屏： @media screen and (min-device-width:1024px){ 选择器:{样式控制} } 3.ipad竖屏： @media screen and (min-device-width:768px){ 选择器：{样式控制} } 4.普通pc： @media screen and (min-width:1200px){ 选择器：{样式控制} }查看全部
-
meta-响应式网页设计的标签，设备的可视区域 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> name,说明使用视口， content,告诉浏览器使用设备的宽度为视图宽度，首次加载的页面禁止缩放，可视区域的最大和最小缩放级别都为1，用户禁止缩放。 E6-8不支持css3 media,解决兼容方法： media-queries.js(http://code.google.com/p/css3-mediaqueries-js/) respond.js(https://github.com/scottjehl/Respond) <!—[if lt IE9]> <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> <![endif]>查看全部
-
响应式布局技巧： 丢弃: 多余div, 不使用内联样式， 少用js或flash, 丢弃没用的绝对定位和浮动定位， 摒弃任何冗余构和不使用100%设置 常用： 使用html5 Doctype 和相关指南； 重置好样式， 语义化的核心布局， 重要的网页元素使用简单的技巧，比如导航菜单， 使用弹性盒子布局查看全部
-
在做响应式设计时，需要用到媒体查询： @media 设备类型 and (设备特性){ 选择器:{样式控制} } 其中，设备特性-使用断点，即设备的分辨率，设备宽度的临界点max-width和min-width 大屏pc分辨率：min-width:768px; 一般pc分辨率：min-width:640px; 平板分辨率：min-width:480px; 手机分辨率：min-width：320px;查看全部
-
responsive design响应式设计： 是为了解决用户终端设备适配，在不同分辨率下展示不同的排版样式 一般响应式页面设置需要三个条件： 流体网格、响应式图片、媒体查询 流体网格-根据用户终端屏幕大小，利用百分比分布盒子大小 响应式图片-可以设置img:max-width大小 针对不同设备设计多张响应式图片显隐控制图片的引入 媒体查询-根据设备尺寸大小，加载控制样式查看全部
-
css3 Media Queries的使用： 支持Ie8以上浏览器，不用添加前缀兼容处理 常用引用方法： 1.文件样式中使用： @media 媒体（设备）类型 and 媒体特性{ 选择器 {/* 样式 */} } 2.文件head中link引入使用 <link href="xxx.css" media="媒体类型 and （媒体特性）"/> ps:如果省略媒体类型的话，默认是all 可以多个设备引入同一个样式文件 <link href="aaa.css" media="screen and (max-width:480px),handheld and (min-width="520px" /> device-width:设备屏幕的输出宽度（智能设备），设备实际分辨率，可视面积分辨率 <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" /> only:特定媒体类型 <link href="ss.css" media="only screen and (max-device-width:240px)/> not:排除法，反向指定样式文件 <link rel="stylesheet" media="not screen and (max-width:240px)" href="mediu.css"/>查看全部
-
媒体查询是为了响应式设计而生，响应式设计是根据用户终端设备适配对应样式。 媒体类型的引用方式：三种 1.link方法 在heade标签的style中引入 <link rel="xx.css" media="screen"/> <link rel="xxx.css" media="all"/> <link rel="xxx.css" media="print"/> 2.@import方法 分两种引入方式：样式文件xxx.css中和heade标签的style中 a.一样式文件中引入 @importurl(abc.css) screen; @importurl(bcd.css) all; b.在heade标签中style引入 @importurl(abc.css) screen; @importurl(bbb.css) print; 3.@media方法 a.在样式文件中引用 @media screen { 某元素：{/* 样式代码 */}} @media all { 某元素：{/* 样式代码 */}} b.在head中的style引用 @media screen { 某元素：{/* 样式代码 */}} @media all { 某元素：{/* 样式代码 */}}查看全部
-
transform:skew(-50deg);歪斜查看全部
-
transform变形rotate螺旋查看全部
-
word-wrap:nomal表示控制连续文本换行|break-word表示内容将在边界内换行查看全部
-
强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）查看全部
举报
0/150
提交
取消