"Detect Viewport Context"
Bootstrap 3.3.0 Snippet by Schmalzy

<div class="container"> <div class="row"> <div class="col-sm-8 col-md-offset-2"> <h2>Detect Your Current Viewport Context</h2> <p>This small CSS snippet will display your current viewport (<code>xs</code>, <code>sm</code>, <code>md</code> or <code>lg</code>) context when using Bootstrap. It can be useful for testing responsive sites, or demoing responsive behaviors on different viewports. Hope it helps someone out there!</p> <pre> body::before { content: "xs"; position: fixed; top: 0; left: 0; z-index: 9999999; background-color: #000; color: #fff; } @media (min-width : 768px) { body::before { content: "sm"; }} @media (min-width : 992px) { body::before { content: "md"; }} @media (min-width : 1200px) { body::before { content: "lg"; }} </pre> <div class="alert alert-info" role="alert"> Notice the little back box in the upper left corner of the page? Change the width of your browser window and see it in action! </div> </div> </div> </div>
body::before { content: "xs"; position: fixed; top: 0; left: 0; z-index: 9999999; background-color: #000; color: #fff; } @media (min-width : 768px) { body::before { content: "sm"; }} @media (min-width : 992px) { body::before { content: "md"; }} @media (min-width : 1200px) { body::before { content: "lg"; }}

Similar snippets: See More


Comments:

comments powered by Disqus