sass重构响应式unofficial‘s博客轻松适应移动端
前言:
刚刚玩博客园几天时间,发现挺不错的,对于我这个懒人又是一个爱折腾的人来说挺不错的,对于上班玩电脑,下班玩手机的用户来说,博客园中我的博客有一点给我的感觉不是很友好,电脑端看起来很美观的一个页面,移动端竟然也是原模原样的“美观”,由于工作主要是从事移动端开发,看着博客可以禁用模板样式,于是乎就决定把博客样式重构一下,分享是一种美德,不喜勿喷。本文原创博客地址:http://www.cnblogs.com/unofficial官网地址:www.pushself.com)
准备工作:
编辑工具:notepad++,sublime text
样式工具:sass
开启自动编译sass文件
方法参考一:前端开发环境之GRUNT自动WATCH压缩JS文件与编译SASS文件
方法参考二:ruby环境下安装sass,sass --watch命令,方法一中也有说到,详细的资料可以百度一下,阮一峰老师的教程就挺不错的额。
思路一:
不禁用模板默认css,直接在此处重构css样式,或者上传样式文件直接引用,这种方式比较偷懒,只是局部修改就要的了
思路二:
禁用模板默认css,完全重新来过,爱折腾的懒人我是选择的上传css样式文件直接引用
注:文件上传地址是文件--文件上传,文件的路径是http://files.cnblogs.com/用户名/文件名.css
开始工作:
1.分析模板布局|(脑图来源于脑图工具)
2.新建sass文件后,直接引入相应的mixin代码块,方便我们快速编写简化的css代码
可以参考大漠的10个常用mixin代码块,还在不断更新中,由于代码块使用的是@include 包含入样式,这样不能达到简化css样式代码,于是乎我们可以使用一个小的技巧,例如我们需要响应式断点,我们可以直接使用%breakPoint,在它的里面包含代码块,再@extend继承%breakPoint,如此一来你的代码就变得简化了很多,这个断点由于文中就一个看不出效果,通常我们在网页布局中最离不开的一个东西就是浮动,浮动这个东西挺有趣的,听过张鑫旭老师讲过一篇关于浮动的课程,他对于浮动这块的讲解易懂,他的声音太销魂了,让人久久难以忘怀。
有以下HTML代码嵌套div:
<div id="navigator">
<div id="navList"></div>
<div class="blogStats"></div>
</div>
有以下SASS代码:
%clearfix:after{
content:" ";
height:0;
display:block;
visibility:hidden;
clear:both;
}
#navigator {
@extend %clearfix;
}
//css3多前缀自动生成
@mixin css3($property, $value) {
@each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
#{$prefix}#{$property}: $value;
}
}
//响应式断点
@mixin breakPoint($point) {
@if $point == large {
@media (min-width: 64.375em) { @content; }
}
@else if $point == medium {
@media (min-width: 50em) { @content; }
}
@else if $point == small {
@media (min-width: 37.5em) { @content; }
}
}
3.宽度不能固定宽度
在main环节我们可以发现这样mainContent与sideBar有最小宽度,这样以来设备尺寸小的时候不能在容器内装下,就会出现溢出,添加了一个滚动,移动设备上就需要左右拖动才能显示完全,这一点很重要,通过百分比来设计宽度,media控制显示,移动设备屏幕较小的时候的可以选择sideBar置于文章底部或者隐藏掉,看个人喜好。
4.添加meta标签
移动端设备添加一个响应式宽度viewport标签,content的内容是,width=device-width:宽度等于设备宽度;initial-scale=1:初始化比例大小为1;maximum-scale=1:最大比例大小为1;minimum-scale=1:最小比例大小为1;user-scalable=no:是否允许手动调节大小
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
待更新结语:
由于时间关系暂时还没有完全更新我的样式文件,后续更新文件后就可以实现相应的效果了,第一次正儿八经的写详细的技术文章,希望可以待在首页与大家多多交流,互相学习。本文原创博客地址:http://www.cnblogs.com/unofficial官网地址:www.pushself.com)
sass重构响应式unofficial‘s博客轻松适应移动端的更多相关文章
- Zblog主题模板自适应手机响应式ZblogPHP简洁博客主题
Z-blog PHP版本简洁主题模板 特点简洁舒适 手机移动端自适应,完美有利于优化 代码结构利于编辑 对于不懂代码的,也非常适合简答后台简答 PC端侧边栏下拉跟随,无论下面有多长,导航侧边栏都只在左 ...
- SpaceBase – 基于 Sass 的响应式 CSS 框架
SpaceBase 是一个基于 Sass 的响应式 CSS 框架.SpaceBase 是可以在建立和定制您的需要的一个样板层,它结合最佳实践为今天的响应式网页与我们对每一个项目中使用的核心组件. 在线 ...
- SASS优化响应式断点管理
前端开发whqet,csdn,王海庆,whqet,前端开发专家 原文:<Managing Responsive Breakpoints with Sass> 作者:Hugo Giraude ...
- 一步步开发自己的博客 .NET版 剧终篇(6、响应式布局 和 自定义样式)
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
- Web移动端页面 --响应式和动态REM
响应式 什么是响应式页面呢? 顾名思义响应式页面就是能做出响应的页面,它的页面效果不是定死的,会随着用户的改变而改变. 如何着手响应式有以下几个思考的方向 找一份设计图 使用Media Query 隐 ...
- Hexo+Github: 博客网站搭建完全教程(看这篇就够了)
本篇教程首次发布在个人博客:sunhwee.com,想要获得最佳阅读体验,欢迎前往,建议用电脑查看教程文档. # 阅读须知 注意,这篇文章篇幅较长,主要针对新手,每一步很详细,所以可能会显得比较啰嗦, ...
- 欢迎阅读daxnet的新博客:一个基于Microsoft Azure、ASP.NET Core和Docker的博客系统
2008年11月,我在博客园开通了个人帐号,并在博客园发表了自己的第一篇博客.当然,我写博客也不是从2008年才开始的,在更早时候,也在CSDN和系统分析员协会(之后名为"希赛网" ...
- 一个基于Microsoft Azure、ASP.NET Core和Docker的博客系统
2008年11月,我在博客园开通了个人帐号,并在博客园发表了自己的第一篇博客.当然,我写博客也不是从2008年才开始的,在更早时候,也在CSDN和系统分析员协会(之后名为“希赛网”)个人空间发布过一些 ...
- 基于Microsoft Azure、ASP.NET Core和Docker的博客系统
欢迎阅读daxnet的新博客:一个基于Microsoft Azure.ASP.NET Core和Docker的博客系统 2008年11月,我在博客园开通了个人帐号,并在博客园发表了自己的第一篇博客 ...
随机推荐
- goaccess
找了各种工具,最终还是觉得goaccess不仅图文并茂,而且速度快,每秒8W 的日志记录解析速度,websocket10秒刷新统计数据,站在巨人肩膀上你也会看得更远…先上图: 具体方案如下步骤: 一 ...
- leveldb 学习记录(六)SSTable:Block操作
block结构示意图 sstable中Block 头文件如下: class Block { public: // Initialize the block with the specified con ...
- 项目启动一直死循环 DruidDataSource.init 方法
今日项目启动遇到一个问题: 项目启动一直死循环 DruidDataSource.init 方法, 代码和同事相同,环境也一致 最后通过maven clean 然后重新install ,再次启动正常了 ...
- You are using pip version 9.0.1, however version 9.0.3 is available.
1,pip不能用了,提示:You are using pip version 8.1.1, however version 9.0.1 is available.网上搜索了一箩筐的安装程序,各种安装, ...
- 1.2 eigen中矩阵和向量的运算
1.2 矩阵和向量的运算 1.介绍 eigen给矩阵和向量的算术运算提供重载的c++算术运算符例如+,-,*或这一些点乘dot(),叉乘cross()等等.对于矩阵类(矩阵和向量,之后统称为矩阵 类) ...
- Python Day 3
阅读目录: 内容回顾: 变量(标识符)的命名规范: 常量: 格式化输入\输出: 注释: 基本数据类型: 运算符: ##内容回顾 1.语言的分类: -- 机器语言:直接编写0,1指令,直接能被硬件执行. ...
- 2019.02.26 bzoj4311: 向量(线段树分治+凸包)
传送门 题意: 支持插入一个向量,删去某一个现有的向量,查询现有的所有向量与给出的一个向量的点积的最大值. 思路: 考虑线段树分治. 先对于每个向量处理出其有效时间放到线段树上面,然后考虑查询:对于两 ...
- ABP框架系列之二十一:(Domain-Services-领域服务)
Introduction Domain Services (or just Service, in DDD) is used to perform domain operations and busi ...
- Python数字与字符之间的转换
Python数字与字符之间的转换 命令 意义 int(x [,base ]) 将x转换为一个整数 long(x [,base ]) 将x转换为一个长整数 float(x ) 将x转换到一个浮点数 co ...
- sublime将python的运行结果在命令行显示
sublime将python的运行结果在命令行显示 为什么这么折腾? 因为每次查看输出结果都要上下拖动窗口,很烦. 将build system修改为 { "cmd": [" ...