How to implement responsive CSS in Laravel 4

Question

It has come to my attention that in Laravel 4, you can load CSS and scripts using the following method:

{{ HTML::style('css/style.css'); }}

Which will result in:

<link media="all" type="text/css" rel="stylesheet" href="http://localhost/cupcakes-laravel/public/css/style.css">

But now I am wondering how I can load responsive CSS to achieve something like this:

<link rel="stylesheet" media="only screen and (max-width: 1023px), only screen and (max-device-width: 1023px)" href="css/tablet.css" />

Answer 1

Answer №1

To include additional attributes like media, you have the option to pass an array along with your array.

{{ HTML::style('css/tablet.css', array('media'=>'only screen and (max-width: 1023px), only screen and (max-device-width : 1023px)'); }}

Answer 2

To include additional attributes like media, you have the option to pass an array along with your array.

{{ HTML::style('css/tablet.css', array('media'=>'only screen and (max-width: 1023px), only screen and (max-device-width : 1023px)'); }}

Answer 3

Another alternative approach is to utilize the subsequent technique instead of constructing the entire link with blade

 <link href="{{ URL::to('/css/style.css')}}" rel="stylesheet" media="screen">

Answer 4

Another alternative approach is to utilize the subsequent technique instead of constructing the entire link with blade

 <link href="{{ URL::to('/css/style.css')}}" rel="stylesheet" media="screen">