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

📅  最后修改于: 2021-11-08 05:22:47             🧑  作者: 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,则其背景色为none。