You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<linkrel="stylesheet" href="./index.css"><linkrel="stylesheet" href="./index_ipad.css" media="screen and (max-width:1200px)"><linkrel="stylesheet" href="./index_mobile.css" media="screen and (max-width:768px)">
效果图如下(代码会在下面全部放上来):
media使用
原理
media简单来说就是一种查询工具,加入说你想知道打开你网页的屏幕宽度是768px的时候才使用这个样式,这个时候你就可以这样写:
这个代码的效果就是当前界面的宽度小于768px的时候,将网页背景变成黑色。
screen
是用于电脑屏幕、平板电脑、智能手机等。对于@media的更多媒体类型如下:在做响应式布局的时候我主要用到
max-width
和min-width
两种属性,min-width
的作用于max-width
的作用相反。应用
由我的代码可以得知我将页面分为三种大小,分别为(1200, +∞),(768, 1200),(0, 768),这个分类我是参照bootstrap来分的。
首先引入index.css,这也是你的电脑打开时的默认样式,当你的电脑宽度逐渐减小时,就会开始应用index_ipad.css这个样式文件,在这个文件中并不是将index.css的样式代码全部重写了一遍,而是把需要更改样式的代码做了编写。
举个例子,比如说我index.css中有四个方块,默认布局是float布局,全部排在一行,但是当页面宽度变为ipad大小是页面方块就会变成两行,原理是改一下方块的宽度。具体实现代码如下:
侧拉栏
侧拉栏的原理其实并不难,就是先写一个div,保持与header元素相同,然后再设置其left属性,使其隐藏,通过js操作其left,将其显示出来。
全部代码
The text was updated successfully, but these errors were encountered: