css 响应式布局-不同媒体设备样式

小灰灰 2021-07-24 15:35 461阅读 0赞

在style上添加属性
    	media='screen'  屏幕设备上有效
    	media='print'	打印机上有效
    	media='print,screen'
    	media='all' 	所有设备
    
    若是外部css文件
    	在link上添加属性
    	media='screen'  屏幕设备上有效
    	media='print'	打印机上有效
    	media='print,screen'
    	media='all'
    
    内部css文件引入
    	@import url(xx.css) print;
    	@import url(xx.css) screen;
    	@import url(xx.css) all;
    
    在css代码局部使用
    	@media screen and (max-width:npx)  当宽度小于npx时,使用该样式
    	{
    		样式
    	}
    
    逻辑指令
    	多个条件同时满足使用and
    	media='screen and (min-width:npx)'     当宽度大于npx时,使用该样式
    	media='screen and (min-width:npx) and (max-width:n1px)'  当宽度大于npx，小于n1px时,使用该样式
    	
    	或的逻辑使用‘,’号隔开
    	media='screen and (min-width:npx),screen and (max-width:n1px)'  当宽度大于npx或者小于n1px时,使用该样式
    	
    	非的逻辑使用not
    	@media not sreen and (min-width:npx){...}  当设备不大于npx时应用该样式
    	
    	过滤逻辑使用only
    	@media only not sreen and (min-width:npx){...} 当浏览器支持这条语句时,会正常判断,不支持将会忽略
    
    优先级
    	越下面的优先级越高,当设备超过900时会先匹配第一条,超过1200时会先匹配第二条
    	
    	@import url(xx.css) screen and(min-width:900px);
    	@import url(xx.css) screen and(min-width:1200px);
    
    属性:
    	min-width 设备最小宽度大于该属性时应用样式
    	max-width  设备最大宽度小于该属性时应用样式
    	orientation:landscape;  设备横屏时应用该样式