您的位置：首页 > 其它

学习总结（15-12-8）

2015-12-08 21:59 363 查看
今天讲了响应式，感觉还是挺不错的。

响应式是针对不同分辨率应用不同的CSS样式；要实现响应式就要知道一下几点：

一：meta标签的设置；

网页宽度调整：<metaname="viewport"content="width=device-width;initial-scale=1.0"/>该代码的意思是：网页宽度默认等于屏幕宽度
（width=device-width）
，原始缩放比例
（initial-scale=1.0）
，即网页初始大小占屏幕面积的100%。除了这两个属性外，还有很多其他属性，这里就不细说了。

二：不适用绝对宽度和字体；

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度，也不能使用具有绝对宽度的元素。

三：流式布局；

四：媒体查询；

@mediaonlyscreenand(max-width:600px)
当检测到
screen
的最大宽度是
600px
的时候,就将执行
@media
里面的css,其实就是相当于利用了层叠样式表的特性,
@media
里面的代码将原来的覆盖了；
max-width
就是当屏幕小于等于多少的时候执行(<=)，
min-width
就是当屏幕大于等于多少的时候执行(>=)；

响应式的具体思路即使这样的。

当然响应式最不容易理解的就是px,em,rem；em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px；所有未经调整的浏览器都符合（1em=16px）。
em的
一个参考点，一般都是以
<body>
的
font-size
为基准。em会继承父元素的字体大小，就很不方便，所以就有rem的出现了；
rem
是相对于根元素
<html>
，这样就意味着，我们只需要在根元素确定一个参考值。

今天就是这些，主要记住em和rem的区别和运用。


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航