VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > HTML >

  • HTML5 教程之Foundation CSS 可见性

根据屏幕尺寸显示元素

以下类会根据设备(屏幕尺寸)来显示元素。

类 描述
.show-for-small-only 只在小型设备上显示元素 (屏幕宽度小于 40.0625em )
.show-for-medium-up 在中型及以上设备上显示元素  (屏幕宽度大于 40.0625em)
.show-for-medium-only 只在中型设备上显示元素 (屏幕宽度在 40.0625em 到 64.0625em 之间)
.show-for-large-up 在大型及以上设备上显示元素 (屏幕宽度大于 64.0625em)
.show-for-large-only 只在大型设备上显示元素 (屏幕宽度在 64.0625em 到 90.0625em 之间)
.show-for-xlarge-up 在更大型及以上设备上显示元素 (屏幕宽度大于 90.0625em)
.show-for-xlarge-only 只在更大型及以上设备上显示元素 (屏幕宽度在 90.0625em 到 120.0625em之间)
.show-for-xxlarge-up 在超大型及以上设备上显示元素 (屏幕宽度大于 120.0625em)

以下实例演示了以上所有 .show- 类的可见性。



    
	
  1. 
		<p class="show-for-small-only">你在小型设备上。</p>
    2. 
	
  2. 
		<p class="show-for-medium-up">你在中型、大型、更大型、超大型的设备上。</p>
    3. 
	
  3. 
		<p class="show-for-medium-only">你在中型设备上。</p>
    4. 
	
  4. 
		<p class="show-for-large-up">你在大型、更大型、超大型的设备上</p>
    5. 
	
  5. 
		<p class="show-for-large-only">你在大型设备上。</p>
    6. 
	
  6. 
		<p class="show-for-xlarge-up">你在更大型、超大型的设备上。</p>
    7. 
	
  7. 
		<p class="show-for-xlarge-only">你在更大型设备上。</p>
    8. 
	
  8. 
		<p class="show-for-xxlarge-up">你在超大型设备上。</p>
    9. 




	复制



	实例预览 »



	根据屏幕尺寸隐藏元素



	以下类会根据设备(屏幕尺寸)来隐藏元素。



	
		

			
				类
			
				描述
		

		

			
				.hide-for-small-only
			
				只在小型设备上隐藏元素 (屏幕宽度小于 40.0625em )
		

		

			
				.hide-for-medium-up
			
				在中型及以上设备上隐藏元素  (屏幕宽度大于 40.0625em)
		

		

			
				.hide-for-medium-only
			
				只在中型设备上隐藏元素 (屏幕宽度在 40.0625em 到 64.0625em 之间)
		

		

			
				.hide-for-large-up
			
				在大型及以上设备上隐藏元素 (屏幕宽度大于 64.0625em)
		

		

			
				.hide-for-large-only
			
				只在大型设备上隐藏元素 (屏幕宽度在 64.0625em 到 90.0625em 之间)
		

		

			
				.hide-for-xlarge-up
			
				在更大型及以上设备上隐藏元素 (屏幕宽度大于 90.0625em)
		

		

			
				.hide-for-xlarge-only
			
				只在更大型及以上设备上隐藏元素 (屏幕宽度在 90.0625em 到 120.0625em之间)
		

		

			
				.hide-for-xxlarge-up
			
				在超大型及以上设备上隐藏元素 (屏幕宽度大于 120.0625em)
		

	





    
	
  1. 
		<p class="hide-for-small-only">你不在小型设备上。</p>
    2. 
	
  2. 
		<p class="hide-for-medium-up">你不在中型、大型、更大型、超大型的设备上。</p>
    3. 
	
  3. 
		<p class="hide-for-medium-only">你不在中型设备上。</p>
    4. 
	
  4. 
		<p class="hide-for-large-up">你不在大型、更大型、超大型的设备上。</p>
    5. 
	
  5. 
		<p class="hide-for-large-only">你不在大型设备上。</p>
    6. 
	
  6. 
		<p class="hide-for-xlarge-up">你不在更大型、超大型的设备上。</p>
    7. 
	
  7. 
		<p class="hide-for-xlarge-only">你不在更大型设备上。</p>
    8. 
	
  8. 
		<p class="hide-for-xxlarge-up">你不在超大型设备上。</p>
    9. 




	复制



	实例预览 »



	根据屏幕方向显示元素



	以下类会根据设备(屏幕尺寸)来隐藏元素。



	我们可以设置元素在不同方向是是否显示或隐藏。笔记本等桌面设备一般是横向的，但是手机和平板设备可以是横向或纵向，我们可以根据用户手机拿的方向来设置元素隐藏与显示：



	
		

			
				类
			
				描述
		

		

			
				.show-for-landscape
			
				在横向时显示元素（纵向隐藏）
		

		

			
				.show-for-portrait
			
				在纵向时显示元素（横向隐藏）
		

	




	下面实例根据使用的方向显示文本内容：



	

		实例

	

	
    
		
  1. 
			<p class="show-for-landscape">文本只在横向显示。</p>
    2. 
		
  2. 
			<p class="show-for-portrait">文本只在纵向显示。</p>
    3. 
	

	

		复制

	实例预览 »



	触屏设备的显示与隐藏



	你可以根据设备是否支持触摸来显示与隐藏元素。



	
		

			
				类
			
				描述
		

		

			
				.show-for-touch
			
				在支持触屏的设备上显示(不支持的设备上隐藏)
		

		

			
				.hide-for-touch
			
				在支持触屏的设备上隐藏(不支持的设备上显示)
		

	




	下面实例根据设备是否支持触摸来显示文本内容：



	

		实例

	

	
    
		
  1. 
			<p class="show-for-touch">你的设备支持触屏。</p>
    2. 
		
  2. 
			<p class="hide-for-touch">你的设备不支持触屏。</p>
    3. 
	

	

		复制

	实例预览 »



	 


      



  

  
  

   
    
    
   

  

  
 
 

 
 
  
 
 
 
 






 






相关教程