![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
响应式设计 移动端
文章平均质量分 81
somnus_ly
当你对某种东西着迷之后,你会很努力的去追寻
展开
-
@media screen 针对不同移动设备
概念: device-pixel-ratio:定义输入设备屏幕的可视宽度与可见高度比率。 device-width:输入设备屏幕的可视宽度。 orientation :屏幕横竖屏定向。landscape是横向,portrait 是纵向【ipad相反】/* iPhone 4 ———– */@mediaonly screen and (-webkit-min-原创 2014-12-05 15:20:47 · 657 阅读 · 0 评论 -
关于rem布局
我们知道,当使用rem布局,并配合JS动态按照比例设置HTML标签上的rem值时,整个页面是按照屏幕的宽度来整体缩放的。对于高度不限制的页面(也就是超出一屏页面可以滚动),这种方案没有任何问题,简单暴力。但是对于一些需要布满一整屏的页面(比如现在流行的上下/左右滑动的那种),由于一个页面的元素必须在一个页面内布满,不能超出,那么问题就来了:如果你是按照iPhone5的尺寸来原创 2015-09-09 10:55:22 · 1386 阅读 · 0 评论 -
移动端常用布局(一)
1. 输入框placeholder样式 (提示文字可单独设置字体样式和大小) /* WebKit browsers */ .login-inp::-webkit-input-placeholder {color: #9e9d9d; } /* Mozilla Firefox 4 to 18 */ .login-inp:-moz-placeholder原创 2016-01-06 10:57:38 · 1000 阅读 · 0 评论 -
移动端常用布局(二)
1.商品列表布局毛巾两件套¥1000.0020 样式:.product-list li{float: left;width: 50%; box-sizing: border-box;}.product-list li原创 2016-01-06 13:24:01 · 522 阅读 · 0 评论 -
HTML 命名规范
1.body元素: -wrap 2.固定元素间隙设置: fix-pd 3.固定定位: fix-top fix-bt 4.弹出层遮罩: black-layer 代码示例: .black-layer{ position: fixed; width: 100%; height: 100%;原创 2016-05-05 18:20:06 · 509 阅读 · 0 评论