zoukankan      html  css  js  c++  java
  • css媒体查询移动优先和pc优先

    移动优先,默认你是用手机浏览该网页的,当你用pc浏览时,就会以min-width进行递增式媒体查询

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.wap {
    			font-size: 20px;
    		}
    		@media only screen and (min- 300px) {
    			.wap {
    				font-size: 40px;
    			}
    		}
    		@media only screen and (min- 700px) {
    			.wap {
    				font-size: 60px;
    			}
    		}
    	</style>
    </head>
    <body>
    	<p class="wap">移动优先</p>
    </body>
    </html>
    

    pc优先与之相反,默认你是用pc浏览该网页,当屏幕缩小时以max-width递减式进行媒体查询

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.pc {
    			font-size: 60px;
    		}
    		@media only screen and (max- 700px) {
    			.pc {
    				font-size: 40px;
    			}
    		}
    		@media only screen and (max- 300px) {
    			.pc {
    				font-size: 20px;
    			}
    		}
    	</style>
    </head>
    <body>
    	<p class="pc">pc优先</p>
    </body>
    </html>
    
  • 相关阅读:
    总结:关于作用域的经典面试题
    解决JS拖拽出现的问题
    JS正则(3)总结
    JS正则(2)对正则的理解
    JS 闭包 正则(1)
    JS Date对象
    笔记
    9.13笔记
    9.12学习笔记
    9.11学习笔记
  • 原文地址:https://www.cnblogs.com/yesyes/p/7250383.html
Copyright © 2011-2022 走看看