📌  相关文章
📜  CSS-自适应

📅  最后修改于: 2020-10-26 05:01:08             🧑  作者: Mango

CSS3响应式网页设计

响应式网页设计提供了最佳体验，易于阅读和易于导航，并且在不同设备（例如台式机，手机和标签页）上的调整最小。

响应结构

下图显示了网页的响应结构。

反应灵敏

灵活的网格演示

现场演示

   
   
   
   
      
100% Wide Container

      
      

         
Section

         
      

      
      
75% Wide Container

      
      

         
Section

         
      

      
      
50% Wide Container

      
      

         
Section

它将产生以下结果-

媒体查询

媒体查询针对的是不同尺寸的设备（例如手机，台式机等）的不同样式规则，

现场演示

   

   
      

         If screen size is less than 420px, then it will show lightblue 
         color, or else it will show light pink color

它将产生以下结果-

Bootstrap响应式网页设计

Bootstrap是最流行的基于HTML，CSS和Java脚本的Web设计框架，它可以帮助您以响应方式为所有设备设计网页。

现场演示

      
      
      
   

   
   
      

      
         

            
Tutorials point
 
            

               Tutorials Point originated from the idea that there exists a class 
               of readers who respond better to online content and prefer to learn 
               new skills at their own pace from the comforts of their drawing rooms.
            
 
         

      
         

            

               
Android

               

                  Android is an open source and Linux-based operating system for mobile 
                  devices such as smartphones and tablet computers. Android was developed 
                  by the Open Handset Alliance, led by Google, and other companies.
               

         

         
         

            
CSS

            

               Cascading Style Sheets, fondly referred to as CSS, is a simple design 
               language intended to simplify the process of making web pages presentable.
            

         

      
         

            
Java

            

               Java is a high-level programming language originally developed by Sun 
               Microsystems and released in 1995. Java runs on a variety of platforms,
               such as Windows, Mac OS, and the various versions of UNIX. This tutorial
               gives a complete understanding of Java.

它将产生以下结果-