Responsive considerations for CSS3

It's worth remembering that different declarations can be used for different viewports. For example, although I might not mind the way the gradient pattern looks on smaller viewports:

I may choose not to use it for larger viewports (for example 768 px wide and greater). I can therefore just create a specific rule for the background gradient using media queries:

@media screen and (max-width: 768px) {
  body {
    background-color:white;
    background-image:
      radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px),
      repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0,hsla(0, 0%, 87%, 0.31) 4px, transparent 5px, transparent 20px,hsla(0, 0%, 87%, 0.31) 21px, hsla(0, 0%, 87%, 0.31) 25px,transparent 26px, transparent 50px); 
    background-size: 30px 30px, 90px 90px; 
    background-position: 0 0;
  }
}

Remember that media queries will allow you to specify every element differently for different viewports if you wish. It's all about presenting the...