Refused to apply style from ‘style.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

今天把 Laravel 專案放到新建的 server 跑,出現了這個錯誤:

Refused to apply style from ‘http://localhost:8080/assets/styles/style.css‘ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

找了很久都沒有找到原因,同時伴隨著部分頁面會出現 404。

Stackoverflow 這篇講了很多,但實際上我遇到的倒沒有這麼複雜,而且也不是因為因為 lib 引起的問題,最後在這篇找到解答,原來我只是忘記設定 Apache 的 Allow Override

DocumentRoot /var/www/sitefolder/public
ServerName site.domain.com
<Directory /var/www/sitefolder/public>
    AllowOverride All # 加上這行就可以了
    Allow from all
    Options +Indexes
</Directory>

最後執行 sudo systemctl reload apache2 就正常了。

References

發表留言

[CSS] 元素翻轉

/* 水平翻轉 */
.flip-horizontal {
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

/* 垂直翻轉 */
.flip-vertical {
    -moz-transform: scale(1, -1);
    -webkit-transform: scale(1, -1);
    -o-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    transform: scale(1, -1);
}
發表留言

[CSS] 以CSS Media Requires實作瀏覽器大小偵測

網頁排版時,考慮不同終端設備瀏覽大小是很重要的一環
解析度過小造成跑版,過大時把一些區塊size寫死又會造成頁面太空曠
RWD(Responsive web design) 的第一步,便從這開始

CSS的媒體查詢(Media Requires)語法

@media (query) {
/* CSS Rules used when query matches */
}

 

可以查詢的項目很多,不過RWD最常用的是min-width、max-width、min-height 和 max-height。
min-width:任何超過查詢中指定寬度的瀏覽器都會套用規則。
max-width:任何未超過查詢中指定寬度的瀏覽器都會套用規則。
min-height:任何超過查詢中指定高度的瀏覽器都會套用規則。
max-height:任何未超過查詢中指定高度的瀏覽器都會套用規則。
有涉獵過的人應該也知道還有device-width這個東西
但是device-width是針測裝置的螢幕的大小,而非檢視區的大小
通常只用在行動裝置上,建議還是以上面列舉的四項屬性為主。
下面列舉三種不同大小,更換不同背景顏色

@media (min-height: 1024px) and (min-height: 768px) { body { background-color:red; } } /* 1024 x 768 */
@media (min-height: 1440px) and (min-height: 900px) { body { background-color:blue; } } /* 1440 x 900 */
@media (min-height: 1920px) and (min-height: 1080px) { body { background-color:green; } } /* 1920 x 1080 */

 

也可以在link tag的media attribute寫入規則,來引入不同的樣式表

<link media="(max-width: 1024px)" href="max-1024px.css" rel="stylesheet" />
<link media="(max-width: 1440px)" href="max-1440px.css" rel="stylesheet" />
<link media="(max-width: 1920px)" href="max-1920px.css" rel="stylesheet" />

 

這裡有一些可以觀看一些RWD的例子:
http://mediaqueri.es/ 
Reference:
http://fundesigner.net/responsive-web-design-explain/
http://fundesigner.net/css3-media-queries/
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=zh-tw#section

發表留言