Apply suggestions from code review

Co-authored-by: Chris Mills <[email protected]>

files/en-us/web/css/css_media_queries/index.md

@@ -10,9 +10,11 @@ spec-urls:
 
 {{CSSRef}}
 
-**CSS media queries** module enables testing and querying viewport values or user-agent features, to conditionally apply CSS styles based on the current user environment. Media queries are used in the CSS `@media` rule and in other contexts and languages, such as HTML and JavaScript.
+The **CSS media queries** module enables testing and querying of viewport values and browser or device features, to conditionally apply CSS styles based on the current user environment. Media queries are used in the CSS `@media` rule and other contexts and languages such as HTML and JavaScript.
 
-Media queries are a key component of [responsive design](/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design). They enable applying CSS styles depending on the presence or value of device characteristics. It's common to apply a media query based on the {{Glossary("viewport")}} size so that layout choices can be made for devices with different screen sizes. For example, you may increase the font sizes when printing a page, the padding between paragraphs when a page is viewed in portrait mode, or the size of buttons on touchscreens.
+Media queries are a key component of [responsive design](/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design). They enable conditional setting of CSS styles depending on the presence or value of device characteristics. It's common to use a media query based on {{Glossary("viewport")}} size to set appropriate layouts on devices with different screen sizes — for example three columns on a wide screen or a single column on a narrow screen.
+
+Other common examples include increasing the font size and hiding navigation menus when printing a page, adjusting the padding between paragraphs when a page is viewed in portrait or landscape mode, or increasing the size of buttons to provide a larger hit area on touchscreens.
 
 In [CSS](/en-US/docs/Web/CSS), use the {{cssxref("@media")}} [at-rule](/en-US/docs/Web/CSS/At-rule) to conditionally apply part of a style sheet based on the result of a media query. To conditionally apply an entire style sheet, use {{cssxref("@import")}}.
 

files/en-us/web/css/css_media_queries/printing/index.md

@@ -42,7 +42,7 @@ You can also use the {{cssxref("@page")}} at-rule to modify different aspects of
 
 ## Detecting print requests
 
-Browsers send {{domxref("Window/beforeprint_event", "beforeprint")}} and {{domxref("Window/afterprint_event", "afterprint")}} events determine when printing may have occurred. You can use this to adjust the user interface presented during printing (such as by displaying or hiding user interface elements during the print process).
+Browsers send {{domxref("Window/beforeprint_event", "beforeprint")}} and {{domxref("Window/afterprint_event", "afterprint")}} events to determine when printing may have occurred. You can use this to adjust the user interface presented during printing (for example displaying or hiding user interface elements during the print process).
 
 ## Examples
 

files/en-us/web/css/css_media_queries/using_media_queries/index.md

@@ -6,7 +6,7 @@ page-type: guide
 
 {{CSSRef}}
 
-**Media queries** allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics such as screen resolution, aspect ratio, or orientation, the browser {{glossary("viewport")}} width or height, user preference setting such as preferring reduced motion, data usage, or tranparency, or other features.
+**Media queries** allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics such as screen resolution or orientation, aspect ratio, browser {{glossary("viewport")}} width or height, user preferences such as preferring reduced motion, data usage, or transparency.
 
 Media queries are used for the following:
 
@@ -93,8 +93,8 @@ For instance, this `@media` rule uses two media queries to target both screen an
 }
 ```
 
-See [media type](/en-US/docs/Web/CSS/@media#media_types) for the list of available media types.
-Because media types describe devices in very broad terms, most of the originally defined media types were deprecated, with just `screen`, `print`, and `all` available. To target more specific attributes, use _media features_ instead.
+See [media types](/en-US/docs/Web/CSS/@media#media_types) for the list of available media types.
+Because media types describe devices in very broad terms, most of the originally-defined media types were deprecated, with just `screen`, `print`, and `all` remaining. To target more specific attributes, use _media features_ instead.
 
 ## Targeting media features
 
@@ -110,7 +110,7 @@ This example applies styles when the user's _primary_ input mechanism (such as a
 
 Media features are either range or discrete.
 
-_Discrete features_ take their value from an {{glossary("enumerated")}} set of possible keyword values. For example, the discrete `orientation` feature accepts either `landscape` or `portrait`. Range features
+_Discrete features_ take their value from an {{glossary("enumerated")}} set of possible keyword values. For example, the discrete `orientation` feature accepts either `landscape` or `portrait`.
 
 Many _range features_ can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints.
 For example, this CSS will apply styles only if your browser's {{glossary("viewport")}} width is equal to or narrower than 1250px:
@@ -129,7 +129,7 @@ This can also be written as:
 }
 ```
 
-With media query range features, you can either use the inclusive `min-` and `max-` prefixes or the more concise range syntax operators `<=`, `=>`.
+With media query range features, you can either use the inclusive `min-` and `max-` prefixes or the more concise range syntax operators `<=` and `=>`.
 
 The following media queries are equivalent:
 
@@ -143,15 +143,15 @@ The following media queries are equivalent:
 }
 ```
 
-The range comparisons above are all inclusive. To not include the comparison value, use `<` or `>`.
+The range comparisons above are inclusive. To not include the comparison value, use `<` and `>`.
 
 ```css
 @media (30em < width < 50em) {
   /* … */
 }
 ```
 
-If you create a media feature query without specifying a value, the nested styles will be used as long as the feature's value is not zero or `none`.
+If you create a media feature query without specifying a value, the nested styles will be used as long as the feature's value is not 0 or `none`.
 For example, this CSS will apply to any device with a color screen:
 
 ```css
@@ -207,7 +207,7 @@ The following rule will apply its styles if the user's device has either a minim
 }
 ```
 
-In this example, if the user is printing to a PDF and the page height is 800px, the media query returns true because the first query component, the page has a height fo `680px` or taller, is true.
+In this example, if the user is printing to a PDF and the page height is 800px, the media query returns true because the first query component — which tests whether the page has a height of `680px` or more — is true.
 Likewise, if a user is on a smartphone in portrait mode with a viewport height of 480px, the media query returns true because the second query component is true.
 
 ### Inverting a query's meaning

files/en-us/web/css/css_media_queries/using_media_queries_for_accessibility/index.md

@@ -12,7 +12,7 @@ page-type: guide
 
 Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity. The [`prefers-reduced-motion`](/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media query enables providing an experience with fewer animations and transitions to users who have set their operating system's accessibility preferences to reduce motion.
 
-Reducing animations or switching animation off completely based on the user's preference can also benefit users with low battery or low-end phones or computers.
+Reducing animations or switching animation off completely based on the user's preference can also benefit users with low battery or low-end devices.
 
 ### Syntax
 
@@ -45,7 +45,7 @@ This example has an annoying animation unless you turn on Reduce Motion in [your
 }
 ```
 
-The value of `prefers-reduced-motion` is `reduce`, not "none". This preference does not mean all animations must be removed, such as could be set with `* {animation: none !important;}`. Rather, users expect motion animation, including those triggered by user interaction, to be disabled unless the animation is essential to the functionality or the information being conveyed (see [WCAG: Animation from Interactions](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html)).
+The value of `prefers-reduced-motion` is `reduce`, not "none". This preference does not mean all animations must be removed, which could be achieved with `* {animation: none !important;}`. Rather, users expect motion animation, including those triggered by user interaction, to be disabled unless the animation is essential to the functionality or the information being conveyed (see [WCAG: Animation from Interactions](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html)).
 
 ## See also