关于响应式布局css的部分知识点

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_41229588/article/details/78686593

知识点一:

::selection{
background-color:#b3d4fc;
text-shadow:none
}

主要设置文字被选中时的样式;
html{
font-size:62.5%;    /*====设置字体为10px===*/
color:#222; /*===浏览器不设置成纯黑色,保护视力,这是种深灰色接近黑色===*/

}

知识点二:

清除浮动的方式:最常用的有:
在父元素设置:overflow:hidden/auto;都可以
或者在父元素设置如下:
     /*======加上before可以防止浏览器顶部的空白崩溃(就是上一个div的margin-bottom和下边的margin-top会发生叠加)
.clearfix:before,
.clearfix:after{
content:" ";
display:table;
}
.clearfix:after{
clear:both;
}

学术有个名词BFC:
BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。什么时候会触发BFC呢?常见的如下:
float的值不为none。
overflow的值为auto,scroll或hidden。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。
触发了BFC就能防止塌陷!

知识点三:

解决li元素做导航是,使用inline-block会产生缝隙解决方案:
1.父元素设置font-size:0;
2.把li标签之间的空格去掉或者直接不写结束标签
3.外边距设置成负数:比如margin-left=-3px

给图标加一个灰色滤镜方法:
filter:grayscale(100%)  也要加上浏览器前缀
css3中的计算属性calc:
width:calc(33.333333%-3rem);

//****选择的是除了第一个后边的元素,主要用在导航时的左边框设置较方便
head.top ul li+li{}  

文字不换行并且省略号截断的写法:
a:{

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

}
 在元素前边加伪类。给伪类内容加空格的方法
.notice a:first-child:before{
content:'最新公告: \00a0\00a0';
color:#aaa;
}


知识点四:

媒体查询:媒体查询的级别很高,他不是html的子元素
@media only screen and(max-width:800px){
/*****这里是八百像素以下的应用此css,当用rem和em时是以16px为标准的,所以一般用em即可,因为他级别高,不会匹配父元素的字体大小。}
@media only screen and(min-width:481px)and(max-width:800px){
/*****这里是481px-800px的应用此css}
@media only screen and(max-width:480px){

/*****这里是低于480px的时候应用此css}
响应式图片布局
包括图片的排版和布局,根据不同设备的大小加载不同的图片
1.通过js和服务端写入:通过判断$(window).width()的大小,改变图片的attr
2.通过img的srcset属性
例子:
<img src="jj.png" srcset="img/480.png 480w,
img/800.png 800w,img/1600.png 1600w">

480是480px,

w是宽度,如果已经加载了1600.png的,再变小就不会变化了
如果图片是满屏的这样直接设置即可,如果图片的盒子只有屏幕的一半,则必须引入sizes属性
sizes="100vw" 

vw是 viewport width 视口宽度    vh是 viewport height 视口宽度
100是指100%即按视口的百分之百视口宽度去选择图片
sizes="(min-width:800px) calc(100rw - 30em),100vw"
这句的意思是大于800px时候按照前边的规定来,小于时按百分之百

3.picture标签
自己控制图片选择权
<picture>
    <source media="(max-width:36em)" srcset="img/t-s.jpg 768w" />
    /*****还可以设置横屏:******/
    <source media="(orientation:landscape)" srcset="img/t-s.jpg 768w" />
    <source  srcset="img/t.jpg 1800w" />
    <img src="img/t.jpg">
    </picture>

picture标签的浏览器支持程度不是很好,应该说是特别不好,比如ie就全不支持,这个时候引入polyfill引入picturefill这个库,就可以完美的解决不兼容问题,type属性,可以是webp svg jpg 等
草料二维码,可以生成网址二维码,可供手机查看,对于手机开发时,及其方便
首先查看本机IP  ,通过 ipconfig
192.168.1.2:8080/#/.......
然后复制链接,进去草料二维码网站,手机端即可查看!网址为https://cli.im/

展开阅读全文

没有更多推荐了,返回首页