qiaofugui

Bootstrap 3

布局容器 Bootstrap需要为页面内容和栅格系统包裹一个 .container 容器,Bootstrap预先定义好了这个类,叫 .container,他提供了两个作此用处的类 container 类 响应式布局的容器 固定宽度

qiaofugui 发布于 2024-05-20

响应式开发

响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的 设备划分 尺寸区间 超小屏幕(手机) <768px 超小屏幕(手机) >=768px ~ <992px 超小屏幕(手机) >=992px ~ 1200px 超小屏幕(手机)

qiaofugui 发布于 2024-05-20

移动端-less+rem+媒体查询布局

less+rem+媒体查询布局 rem 单位 rem(root em)是一个相对单位,类似于em,em是父元素的字体大小 不同的是rem的基准是相对于html元素的字体大小

qiaofugui 发布于 2024-05-20

移动端-flex 弹性布局

flex 弹性布局 布局原理 flex 是 flexible Box 的缩写,意为“弹性布局”,用来为盒模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局 当我们为父盒子设置为 flex 布局一以后,子元素的 float、clear 和 vertical-align 属性都将失效

qiaofugui 发布于 2024-05-20

移动端-流式布局(百分比布局)

流式布局(百分比布局) 流式布局,就是百分比布局,也称非固定像素布局 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行缩放,不受固定像素的限制,内容向两侧填充 max-width 最大宽度(max-height 最大高度) min-width 最小宽度(min-height 最小高度)

qiaofugui 发布于 2024-05-20

移动端-meta 视口标签

<meta name="viewpoort" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> 属性 解释说明 width 宽度设

qiaofugui 发布于 2024-05-20

移动端-视口

视口(viewport) 就是浏览器显示页面内容的屏幕区域,视口可以分为布局视口、视觉视口和 理想视口 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的 PC 端页面在手机上显示的问题 iOS、Android 基本都将这个视口分辨率设置为 980

qiaofugui 发布于 2024-05-20

SEO-LOGO SEO优化

logo里面首先放一个 h1 标签,目的是为了提权,告诉搜索引擎,这个地方很重要 h1 里面再放一个 a 链接,可以返回首页,把 logo 的背景图片给 a 链接即可 为了搜索引擎收录我们,我们链接里面要放文字(网站名称),但是文字不要显示出来 方法1:text-indent 移动到盒子外面(tex

qiaofugui 发布于 2024-05-20
上一页 下一页