Aug
10
Foundation – Media Queries ”; Previous Next Media queries are CSS3 module that include media features such as width, height, color and displays the content as per the specified screen resolution. Foundation uses the following media queries to create breakdown ranges − Small − Used for any screen. Medium − It is used for screens of 640 pixels and wider. Large − It is used for screens of 1024 pixels and wider. You can change the screen size by using the breakpoint classes. For instance, you can use .small-6 class for small sized screens and .medium-4 class for medium sized screens as shown in the following code snippet − <div class = “row”> <div class = “small-6 medium-4 columns”></div> <div class = “small-6 medium-8 columns”></div> </div> Changing the Breakpoints You can change the breakpoints, if your application uses SASS version of Foundation. You can place the breakpoints name under the $breakpoints variable in the settings file as shown below − $breakpoints: ( small: 0px, medium: 640px, large: 1024px, xlarge: 1200px, xxlarge: 1440px, ); You can change the breakpoints classes in the settings file by modifying the $breakpoint-classes variable. If you want to use .large class in the CSS, then add it to the end of the list as shown below − $breakpoints-classes: (small medium large); Suppose, you want to use .xlarge class in the CSS, and then add this class to the end of the list as shown below − $breakpoints-classes: (small medium large xlarge); SASS The Breakpoint Mixin You can write the media queries by using breakpoint() mixin along with @include. Use the down or only keywords along with the breakpoint value to change the behavior of the media query as shown in the following code format − .class_name { // code for medium screens and smaller @include breakpoint(medium down) { } // code for medium screens only @include breakpoint(medium only) { } } You can use three media queries portrait, landscape and retina for device orientation or pixel density and they are not width based media queries. Breakpoint Function You can use the functionality of breakpoint() mixin by using the internal function. The breakpoint() functionality can be used directly to write own media queries − @media screen and #{breakpoint(medium)} { // code for medium screens and up styles } JavaScript Working with Media Queries The Foundation JavaScript provides the MediaQuery.current function to access current breakpoint name on the Foundation.MediaQuery object as specified below − Foundation.MediaQuery.current The MediaQuery.current function displays small, medium, large as current breakpoint names. You can get the media query of breakpoint using the MediaQuery.get function as shown below − Foundation.MediaQuery.get(”small”) Sass Reference Variables The following table lists the SASS variables, which can be used to customize the default styles of the component − Sr.No. Name & Description Type Default Value 1 $breakpoints It is a breakpoint name which can be used to write the media queries by using breakpoint() mixin. Map small: 0px medium: 640px large: 1024px xlarge: 1200px xxlarge: 1440px 2 $breakpoint-classes You can change the CSS class output by modifying the $breakpoint-classes variable. List small medium large Mixins Mixins creates a group of styles to build your CSS class structure for the Foundation components. BREAKPOINT It uses breakpoint() mixin to create media queries and includes the following activities − If string is passed, then mixin searches the string in the $breakpoints map and creates the media query. If you are using pixel value, then convert it to em value using $rem-base. If rem value is passed, then it changes its unit to em. If you are using em value, then it can be used as it is. The following table specifies the parameter used by the breakpoint − Sr.No. Name & Description Type Default Value 1 $value It is processes the values by using breakpoint name, px, rem or em values. keyword or number None Functions BREAKPOINT It uses breakpoint() mixin to create media queries with matching input value. The following table specifies the possible input value used by the breakpoint − Sr.No. Name & Description Type Default Value 1 $val It processes the values by using breakpoint name, px, rem or em values. keyword or number small JavaScript Reference Functions There are two types of functions − .atLeast − It checks the screen. It must be wide at least as a breakpoint. .get − It is used to get the media query of the breakpoint. The following table specifies the parameter used by above functions − Sr.No. Name & Description Type 1 size It checks and gets the name of the breakpoint for the specified functions respectively. String Print Page Previous Next Advertisements ”;