IOS14桌面布局图片怎么设置？得益于IOS14系统的更新，很多小伙伴们都尝试到了桌面美化的设置，可以自己设置桌面的图片和各种颜色，那么IOS14桌面布局图片怎么设置？下面就让小编给大家介绍一下。

IOS14桌面布局图片设置教程

1、首先需要打开手机，然后进入到手机的主屏幕界面，点击【图片】；

2、在【图片】界面中。我们需要点击下方的【为你推荐】，进入到为你推荐界面；

3、在【为你推荐】界面中，点击【回忆】选择，点击进入到回忆界面；

4、点击【回忆】后，进入到回忆界面，然后点击右上角的【选择】按钮，点击进入到选择界面；

5、选择完成后我们需要点击右下角的【删除】按钮，点击删除，然后确定删除所选照片，从回忆中删除；

6、点击播放一次回忆功能，返回到手机桌面后，小组件的封面就是我们自己想要设置的照片了。

设置meta标签中 name="viewport"
设置视图标签(viewport)来告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Media Queries 媒体查询
媒体查询可以针对不同的媒体类型(screen print)定义不同的样式
媒体查询根据 条件判断 告诉浏览器如何针对不同的宽度渲染页面
代码
/* 随着屏幕宽度增大或减小的时候，后面的样式会覆盖前面的样式 */
/* 移动端优先使用min-width */
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
    body {
      background-color: blue;
    }
}
/* ipad */
@media screen and (min-width: 768px) {
    body {
      background-color: green;
    }
}
/* PC端优先使用max-width */
/* pc width > 1024px */
    body {
        background-color: yellow;
    }
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
        background-color: #FF00FF;
    }
}
百分比布局
border-radius, translate 的百分比，是相对于自身
padding, marigin 的百分比，不论垂直方向还是水平方向，相对于直接父元素的width
height, width; top, bottom; left, right，都是相对于直接父元素
 缺点
 各属性使用百分比，相对父元素的属性并不是唯一的。导致百分比布局很复杂。
 rem布局
 em 和 rem 是什么
em: 相对于父级元素的字体大小
rem: 使用rem为元素设定字体大小时，指的是相对于HTML根元素的字体大小。    
 rem 布局的要点
根元素的 font-size 提供了一个基准，其他元素以 rem 为固定单位定义大小。
需要根据视图容器的大小，动态的改变根元素 font-size，其他元素也会发生响应式的变化。
在CSS样式之前要写一段JS代码，动态控制根元素 font-size 的大小。
 代码 
 添加resize事件监听，回调函数可以改变rem的大小
function refreshRem() {
    var docEl = doc.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);
利用媒体查询，以rem为单位设置不同尺寸设备下的字体大小
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
      background-color: #FF00FF;
      font-size: 1.4rem;
    }
}
视口单位
使用 vw 作为 CSS 单位
图片响应式 
使用 max-width
img {
    display: inline-block; // 元素相对于周围内容以内联形式呈现，但可以设置宽度和高度
    max-width: 100%;
    height: auto; // 保证图片进行等比缩放而不至于失真
}
max-width 保证图片最大宽度为其容器的100%。如果图片宽度超过了其容器，图片会缩放，占满最大可用空间。
不能用 width: 100% 。这条规则会导致他显示的跟容器始终一样宽。在容器比图片宽的多的情况下，图片被无限拉伸。

使用 background-image
.banner{
  background-image: url(/static/large.jpg);
}

@media screen and (max-width: 767px){
  background-image: url(/static/small.jpg);
}
成型方案
Flex弹性布局
Grid网格布局
Columns栅格系统，往往需要依赖某个UI库，如Bootstrap
作者：前端蔡徐坤
链接：https://juejin.im/post/6870809105095720973
来源：掘金

合理设置栅格化与比例 让版式布局更友好
十二月 31, 2015
评论 (3)
Sponsor
本文不适合采用天才设计(Genius Design)方法的人士。
有一种“奇怪的”现象会经常的看到“很多设计师没有办法清楚的跟其他人解释他们是如何设计的，越细致的地方可能越是如此。比如，这个菜单的宽度为什么是200px？250px或者190px是否可以？图片的尺寸为什么是278px*196px？如何确定网页的宽度？
软件界面的设计师除了视觉本身以外，对于设计是否可以实现、大概以何种方式实现、规范可否被理解并且复制执行、设计实现的性价比与时间比等纬度都应有相当高度的认识。就像建筑设计师一样，他们一定很了解建筑材料以及如何建筑，虽然他们不会去亲自砌墙。:)
希望通过此文可以交流关于栅格化和盒子比例的设计方法。
栅格化
对于网页的宽度，设计师之间基本上比较容易达成共识，比如：950px、960px、1000px、1190px、1200px。但是如果接下来让每一个设计师设计一个左右布局的版式，左边是一个树形菜单，右边是主要内容区域。那么可能会有很多结果。但是这些结果基本上是比较接近的。如果这些设计师都服务于一个品牌下的话，这种情况并不是一个好的事情。会给人以没有一致性的感觉。
图1：一个产品站点，同样是980px的页面宽度，但是菜单宽度分别为：200px和245px
图2：另外一个产品站点，同样是1200px的页面宽度，但是菜单的宽度分别为：250px、230px、200px
每一个界面单独呈现的时候，并不会有不和谐的感觉，但是作为一个产品或者品牌下的一员，这种情况就会带来负面的影响。这种情况可能因为四种情况产生：1.宽度没有理论基础，凭借自身多年的经验取得了一个方便记忆的整数；2.有自己的设计方法，但是一个团队的下的设计师没有统一这个方法；3.设计的时候没有查看已有的类似设计；4.认为对方的(已有)的宽度不适合。
如果大家遵守一个栅格化的设计方法(希望您也可以贡献其他的方法)那么这个问题将会迎刃而解。
先科普一点栅格化的基础。
栅格化并不是一个新的概念，大家关注的点往往是他表面的950、960和1190。左边的三个数据的核心是一个24等分的栅格系统。可以被轻松的2等分、3等分、4等分、6等分、8等分、12等分，还可以做到1:2、1:3、1:5、2:4、1:7、3:5的不对称分割，并且可以精确到像素。由于3:5和3等分的需求，所以[3,8]得到了24这个结果。
W ＝ A * n – i;
A = a + i;
i:被分割的区块之间的间隔(为了方便计算，大都为10px)
整个公示中，i和n一样是核心，再确定i，即可确定整个栅格化系统。
当n ＝ 24, i = 10;假如A＝40，则W＝950；假如A＝50，则W＝1190；假如A＝60，则W＝1430。
科普结束。
虽然A的值可以变成“任何”一个值，但有观点认为栅格化仍然是不太适合弹性布局。因为弹性布局的关键在用百分数单位来替代像素的单位(由于display:flex尚未成为Candidate Recommendation不适合大规模商用)，用百分数来表示无法整出100的分割方案。就算是像6等分这样的诉求，每一份为16.66%，在视觉上也感知不到1像素级的差别。并且还可以转变为50%的33.33%保持对称和1像素级差别的感知。
好像如果在界面中有5等分的需求，整个栅格化系统将变得复杂[3,5,8]，也就是120等分。但其实并不需要如此，因为i并没有改变，只是把a缩小，但对于24等分的下的组合并没有产生变化。所以只需要设置每个A为20%，然后每个A的右测内边距为10即可以融入原来的24分的栅格化系统。
或者换一种更加容易理解的话语来描述栅格化：“栅格化是通过确定等分的单位宽度以及单位宽度之间的间距，把单位宽度进行组合的一种排版方式。”(这句是我自己总结的，求探讨)
板式的变化越复杂，栅格化系统越复杂，就像这个系统最开始被设计的时候：64*36=2304。
在实际操作中，推荐24的栅格化，插入5等分，i＝10，最大宽度1430px，最小宽度为950px。CSS采用百分比。
在设计自己产品的栅格化系统大致可以采用下面的流程：
首先分析等份的复杂度，如果版式仅仅是4等份、3等份的话，12列的栅格系统就可以满足需求。如果有较多不等分的可能，那么还是建议采用24列的栅格系统，如上图，这样你可以灵活的设置。
其次确定页面大概的宽度(如何确定在“比例”的部分会详细说明)，暂时采用1200px。
然后根据版式的预见性，确定模块和模块之前是否有清晰的“间隔”，这个间隔大概是多少？10px？15px？20px？个人认为认可设计方法都有一个目标是效率的提升，所以个位数个人建议是0或者5的话，方便计算，记忆和检验。当然你也可设置其他的数字，给自己挖坑。
蓝色区域是10px(为了更好的展示，实际是空白)
1200px可以被24整除，所以W=1190px。
再看下面一个示例3列等分。
如果目标是1200px左右的话，则W=1180；(3*400px-20px)如果是1000左右的话。W可以等于970px；(3*330px-20px)或者是1000px(3*340px-20px)；
在管理控制台一致性到达一个里程碑之后，现在我们为了一致性以及解决上面描述的问题，开始在腾讯云和DNSpod中去落地，并且希望要求中心内所有设计师遵循此方法。(下图仅为示意)
所以我们的栅格化系统为(30+20)*24-20=1180px
比例
这是一个重要的问题，极大的帮助我们确定字体和行高以及盒子的宽高。
对于字体和行高的比例，大多数也会存在难以统一，甚至可以用杂乱来表示。我曾经在sohu的时候见过同一个新闻列表，14px的宋体，行高居然有22px，23px，24px，25px，27px。设计师的马虎可能是一方面，另外一方面在长达1年的配合中，我竟然发现他并没有这样一个概念，这种细节基本上就是凭感觉。因为在设计这些文字的时候，内心并没有一个“理性”的方法，而是依赖于专业的背景和当时的感觉。和栅格化一样，我们应需要一个方法，一个比例或者几个比例在不同的场景下应用。我推荐1:1.5和1:2的比例(如果你有一个你自己的比例请留言，谢谢)。我本身并不是设计专业，但我能保证这两个比例是一个大多数人都会认为是好的比例。因为：
这是现成的设计“大师”推荐的比例。如果你是果粉的话，基本也会喜欢1:1.2。
所以，当实际字体和行高的时候推荐比例1:1.2；1:1.5；1:2。
我们要如何确定网页中最大的盒子的大概宽度是多少？然后在这个宽度中进行栅格化。现在在这里解释。以我们的用户客户端占比分辨率最大的1920*1080为场景，说说我们可以如何确定网页的宽度。
还是寻找一个大家觉得“好看”的比例作为方法，如果是16:9的比例。那宽度大概是1080px；这个比例又可以赢得果粉的青睐了，因为：
而且16:9被大量的采用到了屏幕的尺寸中，最开始的宽屏显示器。所以这个比例很可能一直在你的生活中陪伴着你。PC显示器，14寸笔记本，手机，电视……
另外的主流比例是4:3。比如1024*768已经大多数的电视信号源比例。如果你采用这个比例，那么页面宽度就是1440px基准。
根号2也是一个“好”的比例，所有的标准纸张的宽高都是这个比例，如果你手边有A4纸的话，你现在就可以按照下面的方法去确认一下。按照这个比例的话就是1357px为基准。
大概认知度最高的比例就是黄金分割比了。
黄金分割奇妙之处，在于其倒数为自身减1，即：1.618的倒数为0.618 = 1.618 – 1
1.618倍和0.618倍
我们会发现有很强艺术背景的人很容易就会找到这个点(或者附近的位置)，但是其他人就难以找到。当我看到下面的图的时候，简直是不可思议。
还有一些比例你可以尝试，比如1.43:1，这个是IMAX的比例。比如7:5，这个是5R相片的比例。
上面所说的所有方法，就方法本身而言可能会引起诸多专业人士的挑战，但是从一致性的角度来讲我们需要在一个范围内统一设计方法。从我所从事的职业来说，理解设计师的设计原理会让沟通更加顺畅，减少更多的细节沟通，并且可以制作出更多复用性更强，代码更优雅的web。
附：页面的留白也是有比较“理性”的方法来设计的。如下图：
期待讨论，期待赐予“理性”的设计方法。
推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流：结交更多有才华的设计师？请加入UI设计QQ群，与50000名设计师交流设计。
赞助商链接
赞助商链接
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
            
果果妈         -
2016 年 09 月 21 日 下午 5:41
那个蒙拉丽莎的图看不懂啊。
当风声吹乱你         -
2016 年 01 月 23 日 下午 10:45
学习了
自在林中鸟         -
2016 年 01 月 05 日 上午 8:58
很实用
{ 发表评论 }
姓 名 (必填)
邮 件 (必填)
网 站

li标签默认样式是前面有一个小圆点或者是数字序号，那么怎样改变li标签的默认样式呢？
css怎么设置li标签的样式？
ul和li列表是使用CSS布局页面时常用的元素。在CSS中，有专门控制列表表现的属性，常用的有list-style-type属性、list-style-image属性、list-style-position属性和list-style属性。
一、list-style-type属性
list-style-type属性是用来定义li列表的项目符号的，即列表前面的修饰。list-style-type属性是一个可继承的属性。其语法结构如下：(列举一些常用的属性值)list-style-type: none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman
(相关课程推荐：css视频教程)
list-style-type属性的属性值有很多，在这里我们只是列举了比较常用的几个。none：不使用项目符号。
disc：实心圆。
circle：空心圆。
square：实心方块。
demical：阿拉伯数字。
lower-alpha：小写英文字母。
upper-alpha：大写英文字母。
lower-roman：小写罗马数字。
upper-roman：大写罗马数字。
使用list-style-type属性的示例代码如下：li{
list-style-type:square;
}
这里是列表内容
这里是列表内容
这里是列表内容
二、list-style-image属性
list-style-image属性用来定义使用图片代替项目符号。它也是一个可继承属性，其语法结构如下：list-style-image:none/url
list-style-image属性可以取两个值：none：没有替换的图片。
url：要替换图片的路径。
来看一段代码：li{
list-style-image:url(images/bg03.gif);
}
这里是列表内容
这里是列表内容
这里是列表内容
三、list-style-position属性
list-style-position属性，是用来定义项目符号在列表中显示位置的属性。它同样是一个可继承的属性，语法结构如下：list-style-position:inside/outsideinside：项目符号放置在文本以内。
outside：项目符号放置在文本以外。
使用list-style-position属性的示例如下：li{
list-style-type:square;
list-style-position:outside;
}
这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。
这里是列表内容
这里是列表内容
再来看一下属性值为inside的样式。li{
list-style-type:square;
list-style-position:inside;
}
这里是使用list-style-position属性值为inside的示例。请注意换行以后项目符号的位置。
这里是列表内容
这里是列表内容
四、list-style属性
list-style属性是综合设置li样式的属性，也是一个可以继承的属性，语法结构如下：li-style:list-style-type/list-style-image/list-style-position
各个值的位置可以交换。比如：li{
list-style:url(images/bg03.gif) inside;
}
这里是使用list-style属性的示例。请注意换行以后项目符号的位置。
这里是列表内容
本文来自css3答疑栏目，欢迎学习！