linux字体栅格化,响应式开发---网页的布局方式、媒体查询、栅格化布局、less语言...

1、响应式开发介绍

a、网页布局方式

5011417db5ae32d84c9fd15758dc4378.png

b、响应式布局

554210bb4e06901061f0e9e72ecac7c0.png

优点:用一个页面适配不同终端的展示

缺点:产生代码冗余,同时使网页体积变得很庞大,不会因为终端的改变而改变网页的体积,不同终端上有些没有显示出来的实际上也加载个渲染了只是看不到,但是那些资源都请求了,那对浏览页面速度和流量而言影响也很大,所以在移动端会带来性能问题

3a71d74b1a01bb2bac84f63b24788696.png

fd0da9fd62d5d328d5cd161004b56b6b.png

2、媒体查询介绍和应用

15ed910174bda6dcb593e51cca8cd0bf.png

b53821374fcd96bf3127ad34820666d8.png

媒体查询用法

1、第一种

43b5f688c6b9c429aeaabbf8011cc2d6.png

2、第二种

02dd7ce5b23d12b554dbd0eee244d845.png

515d63387952932f26d91594f35a7afb.png

8101f3733259fc51c1df822adf8eddae.png

3、bootstrap介绍

css框架----组件框架----强大之处在于响应式布局(栅格化布局 )

c961c91d86f9cde8ce2fff492052be33.png

bootstrap框架

fd501054f9080b91f34227f34751179e.png

90a454fbd8a5449ac0cd5e2fdf501e2b.png

3f6dba4c688d5ca551c6ddcdfd332c78.png

bootstrap使用----bootstrap是基于jquery的css框架

1、下载包

2、使用

a、设置meta,引入文件------搭建bootstrap运行环境

3603a399e2f6e5ba904d6c7aa4d6715a.png

b、运用组件

不仅仅是简单的复制代码,你可以自己去修改样式,定制效果

栅格化布局

12等分  流式布局(放不下的自动换行)

6c030ad69a205d085cbea2df1ca6a8d0.png

3e5cefc2335628b063b77893a25e98d9.png

ad37187e5b92d04f6ebe9ab833dbf75f.png

其他的栅格样式

2fdbba9a13841bd3b9932cf8d203af0e.png

8385592effe6b8820d985f84d52097b7.png

cfe83662fe30ce8758df41e2ac1f6c8f.png

设置元素是否在某一个屏幕下隐藏

98ae95e1769ff50b611b905ad0b677ea.png

源码

76c8e608f080afb30a5e72bf940c6999.png

4、less语法

daa60b2789c6a6add4eedeb3d830c1dc.png

743fae5f8368396880583445d0e1062b.png

15ad3ebef6696a2b05b2446afbe3f5cc.png

less环境的安装和使用

less里有工具把  .less文件编译解析生成一个对应的   .css文件

less语法说明

注释:

39522c6eda0ee0722766185beca4b4df.png

变量:

0e28249ae1cd8526a12667aa0a69e9af.png

混入(函数):

0f4911d0f499a364a2fc968e276b29fb.png

嵌套:用的最多的

f8c17b699a48d92542197e62981828f2.png

d58027a723c534e0cacc2e288196e6a1.png

4e57323f95c8acc352a992fa04ad72e7.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值