📜  如何为超大屏幕编写引导媒体查询?

📅  最后修改于: 2021-05-25 16:33:25             🧑  作者: Mango

Bootstrap:这是一个免费的开源CSS框架,用于构建响应式网站,即,无论屏幕大小分辨率如何,UI都不会变形。它可能是iPad,平板电脑,移动设备或网站可以流畅运行的任何其他设备。为了实现此目标,我们可以使用框架的内置类,也可以使用媒体查询来自定义类属性。下面有一个表,该表枚举了所有媒体查询断点。

Device Type min-width in px
Small Devices like mobiles 576px
Medium Devices like tablets 768px
Large devices like Desktops 992px
Very large or Extra large devices like large desktops 1200px

示例:下面的示例使用媒体查询,并将为非常大的屏幕添加background-color属性。

HTML


  

  
    
    
    
    
    
    
  
    

  

    
        
            
                

Column 1

                

                    HTML stands for HyperText Markup                      Language. It is used to design                      web pages using a markup language.                     HTML is the combination of                      Hypertext and Markup language.                     Hypertext defines the link between                      the web pages. A markup language                      is used to define the text document                     within tag which defines the                      structure of web pages. HTML is a                      markup language that is used by                      the browser to manipulate text,                      images, and other content to                     display it in the required format.                 

            
               
                

Column 2

                

                    The term PHP is an acronym for PHP:                     Hypertext Preprocessor. PHP is a                      server-side scripting language                      designed specifically for web                      development. PHP can be easily                      embedded in HTML files and HTML                      codes can also be written in a PHP                      file. The thing that differentiates                      PHP with client-side language like                      HTML is,PHP codes are executed on                      the server whereas HTML codes are                      directly rendered on the browser.                 

            
        
    
  


输出:

观察:如果屏幕尺寸大于1200px,则背景色为以上颜色;如果分辨率小于1200px,则其背景色为无颜色。